title: Upload multiple files via AngularJS to Laravel Controller
body: <hr>
  
  <h1>I have</h1>
  
  <p><a href="https://i.stack.imgur.com/CYtJf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CYtJf.png" alt="enter image description here"></a></p>
  
  <h1>Browse files button</h1>
  
  <pre><code>&lt;input type="file" upload-files multiple /&gt;
  </code></pre>
  
  <h1>Create Button</h1>
  
  <pre><code>&lt;button class="btn btn-link" ng-click="store()" &gt;Create&lt;/button&gt;
  </code></pre>
  
  <hr>
  
  <h1>Directive</h1>
  
  <pre><code>myApp.directive('uploadFiles', function () {
      return {
          scope: true,
          link: function (scope, element, attrs) {
              element.bind('change', function (event) {
                  var files = event.target.files;
                  for (var i = 0; i &lt; files.length; i++) {
                      scope.$emit("seletedFile", { file: files[i] });
                  }
              });
          }
      };
  });
  </code></pre>
  
  <hr>
  
  <h1>Listen for the file selected</h1>
  
  <pre><code>$scope.files = [];
  $scope.$on("seletedFile", function (event, args) {
  
      console.log("event is ", event);
      console.log("args is ", args);
  
      $scope.$apply(function () {
          $scope.files.push(args.file);
      });
  
  });
  </code></pre>
  
  <hr>
  
  <h1>Post data and selected files.</h1>
  
  <pre><code>$scope.store = function() {
  
      $scope.model = {
        name: $scope.name,
        type: $scope.type
      };
  
      $http({
          method: 'POST',
          url: '/image/store',
          headers: { 'Content-Type': undefined },
          transformRequest: function (data) {
              console.log("data coming into the transform is ", data);
              var formData = new FormData();
              formData.append("model", angular.toJson(data.model));
              for (var i = 0; i &lt; data.files; i++) {
                  formData.append("file" + i, data.files[i]);
              }
              return formData;
          },
  
          data: { model: $scope.model, files: $scope.files }
  
      })
  
  
      .then(function successCallback(response) {
          console.log("%cSuccess!", "color: green;");
          console.log(response);
          $scope.refresh();
          $scope.showModal = false;
          }, function errorCallback(response) {
          console.log("%cError", "color: red;");
          console.log(response);
      });
  };
  </code></pre>
  
  <hr>
  
  <h1>Result</h1>
  
  <p>In my console, I don't see my files got pass on to my controller in the back-end. </p>
  
  <pre><code>array:1 [
    "model" =&gt; "{"type":"wedding"}"
  ]
  </code></pre>
  
  <hr>
  
  <h1>Questions</h1>
  
  <p>What steps did I forget? </p>
  
  <p><strong>How would one go about and debug this further ?</strong></p>
  
  <hr>