pass multiple files to upload

[amitava82]

Added a check to support multiple files passed to upload method. For browsers that support multiple files selection. I needed to pass multiple files to server instead of one file per request. Tested on Latest Chrome and IE9.

[amitava82]

I tested it on IE9 with flash fileAPI. It works. I'm not sure how to upload the swf to plunker to create the demo. I'll look for other service where I can create a demo

[danialfarid]

As you can see in this demo: http://1-test-multi.angular-file-upload.appspot.com/
it works in Chrome but not in IE8-9. I copied your code for that demo.
FileAPI flash will upload multiple files one at a time.

Uploading a bunch of files together is not a good design since uploading is typically a time consuming process and better to be done in smaller steps with a feedback.

[danialfarid]

Some almost related notes:
#1 (comment)
#40 (comment)

[amitava82]

Your example worked for me in IE9. I'm using ASP.NET and the change I made worked for me with IE9 as well. Of course single file can be selected in IE9 with file input type (without flash button). Have not tested with IE8

[danialfarid]

IE9 should always load flash button since FormData is not supported: https://developer.mozilla.org/en-US/docs/Web/API/FormData.
Are you running IE in compatibility mode?
Could you provide a public url for a sample of your code or copy/paste some of your related code here?

[amitava82]

OK I did further troubleshooting, couple of things I've found.

1. IE9 does load flash browse button. I forgot to include the swf. So, multiselect works.
2. There is a bug in the pull request, with current PR only one files get uploaded. it is because the file input name is same for all the selected files which is why it does not work. line 42 should change to have unique field name (e,g., appended by file index). With following change, it should work.

  var fieldName = config.fileFormDataName || 'file';

  if (angular.isArray(config.file)) {
    angular.forEach(config.file, function(i, e) {
      formData.append(fieldName+e, i, i.name);
    });
  } else {
    formData.append(fieldName, config.file, config.file.name);
  }

[danialfarid]

ok I updated the demo http://1-test-multi.angular-file-upload.appspot.com/ with your code.
It is still not working in IE8-9.
It uploads one file only.

[amitava82]

Your code seems to send each file individually. You will have to pass files array

$scope.upload = function(files){
  $upload.upload({
    url: '/api/projects/'+$scope.$stateParams.id+ '/files/',
    file: files //File array
  }).progress(function(evt) {
      $scope.progress = 'percent: ' + parseInt(100.0 * evt.loaded / evt.total);

    }).success(function(data, status, headers, config) {
      //done
    });

};

[danialfarid]

No it doesn't. It sends $scope.selectedFiles which are all the files.
it upload them in the loop though so it all of them will be uploaded couple times.

[amitava82]

You are right! Each file is sent as separate request in IE9/8. I should have inspected requests with fiddler sooner. I was happy that files got uploaded without running through loop. Sorry for all the confusions :\

[danialfarid]

Ok i added this to version 1.1.11.
It would only works for HTML5 browsers if you pass an array to the file option.