Multiple Image Upload in Angular JS

Question

My form will have two file input fields and other fields.The user will be sleecting two different types of files and putting in some data. On submit button I want to send both the files along with the accompanying data to the server.

I have come across two Angular File Uploaders

1. Angular-file-upload (nervgh)
2. Angular File upload (danial farid)

Both allow multiple files but for each file there is one Http request .But the behaviour I want is 1 Post request that sends two files and some JSON data.

My backend is in NodeJS.

Answer 1

You will want something like this.

$http({
        method: 'POST',
        url: '/api/fogbugz/bug/create',
        data: { request: $scope.request, files: $scope.files },
        headers: { 'Content-Type': undefined },
        transformRequest: function(data) {
          var formData = new FormData();
          formData.append("request", angular.toJson(data.request));
          for (var i = 0; i < data.files.length; i++) {
            formData.append("File" + (i + 1), data.files[i]);
          }
          formData.append("nFileCount", data.files.length);
          return formData;
        }
      }).success(function(data) {

      }).error(function(error, response) {

      });

The important part is that you have to set set Content-Type in your header to undefined instead of multipart/form-data because undefined will set the correct boundary for the form data.