How to upload files using multiple files input element?

Question

I'm trying to upload multiple files from multiple input element in one form.

For exemple :

 <form id="category-form" method="post" enctype="multipart/form-data" class="form" name="form">

                <div class="form-group">
                  <p>Pictures of the A Category</p>
                  <input id="a_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="a_pics" required/>
                </div>

                <div class="form-group">
                  <p>Pictures of the B Category</p>
                  <input id="b_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="b_pics" required/>
                </div>    
 </form>

I have a service for the file upload. With this, I can know from which input element it comes from.

.service('fileService', function () {
    var file = {};
    var fileService = {};

    fileService.getFile = function (name) {
        return file[name];
    };

    fileService.setFile = function (newFile, index, name) {
        if (index === 0 && file[name] === undefined)
          file[name] = [];
        file[name][index] = newFile;
    };

    return fileService;
})

.directive('myFileUpload', function (fileService) {
    return function (scope, element, attrs) {
        element.bind('change', function () {
            var index;
            var index_file = 0;
            for (index = 0; index < element[0].files.length; index++) {
              fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
              index_file++;
            }
            index_file = 0;
        });
    }
});

Until there, everything works well. I got an map of my category/files. But, when I upload this to the server, I need to do this :

        var a_pics = fileService.getFile($scope.a_pics);
        var b_pics = fileService.getFile($scope.b_pics);

        var option = {
            transformRequest: angular.identity,
            headers: {'Content-Type': plan_pics.type}
        };

        var fd = new FormData();
        var index;

        for (index = 0; index < a_pics.length; index++) 
          fd.append('file', a_pics[index]);
        for (index = 0; index < b_pics.length; index++)
          fd.append('file', b_pics[index]);

        $http.post('/api/projects', fd, option);

So when the server receive this, It cannot know the category of the file. I got this:

 [{ fieldname: 'file',
    originalname: 'a_cat.png',
    name: 'f771ac79f61dbdbf6fe689f593939ac5.png',
    encoding: '7bit',
    mimetype: 'image/png',
    path: 'client/assets/images/f771ac79f61dbdbf6fe689f593939ac5.png',
    extension: 'png',
    size: 8185,
    truncated: false,
    buffer: null },
  { fieldname: 'file',
    originalname: 'a_cat (1).png',
    name: '830dc77921461b10fecf35004fc00724.png',
    encoding: '7bit',
    mimetype: 'image/png',
    path: 'client/assets/images/830dc77921461b10fecf35004fc00724.png',
    extension: 'png',
    size: 12192,
    truncated: false,
    buffer: null },
  { fieldname: 'file',
    originalname: 'b_cat_8.jpg',
    name: '39f3bd6a7204ac5fdf114a870ece9f50.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    path: 'client/assets/images/39f3bd6a7204ac5fdf114a870ece9f50.jpg',
    extension: 'jpg',
    size: 98143,
    truncated: false,
    buffer: null }]

I tried to add a field in the File object. It doesn't work. Have you got any suggestion? I'm using Angular, Express, Multer and Node.

Answer 1

You need to call the file fields different things for the different categories, for example:

    var a_pics = fileService.getFile($scope.a_pics);
    var b_pics = fileService.getFile($scope.b_pics);

    var option = {
        transformRequest: angular.identity,
        headers: {'Content-Type': plan_pics.type}
    };

    var fd = new FormData();
    var index;

    for (index = 0; index < a_pics.length; index++) 
      fd.append('files_a', a_pics[index]);
    for (index = 0; index < b_pics.length; index++)
      fd.append('files_b', b_pics[index]);

    $http.post('/api/projects', fd, option);

Then you'll get two different field names in your submitted data, and can handle that appropriately in your server code.