define multiple uploaders for angular-file-upload in AngularJs

Question

I am using angularjs file uploader given at "https://github.com/nervgh/angular-file-upload", so my js code look like this:

var uploader = $scope.uploader = new FileUploader({
  url: 'uploadUrl1.php' 
 });

 uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }
    });

and I used it like this in html :

 <input type="file" id="fileInput" nv-file-select="" class="upload" uploader="uploader">

How can I define another uploader say uploader2 in order to post data to different url say uploadUrl2.php.

Answer 1

You could create two separate instances of FileUploader and give each one a different URL. For example:

JavaScript

// Define our URLs. Each URL will have it's own instance of FileUploader
var urls = ['uploadUrl1.php', 'uploadUrl2.php'];

// Define our shared filter
var filterObj = {
    name: 'customFilter',
    fn: function(item /*{File|FileLikeObject}*/, options) {
        var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
        return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
    }
};

// Create a new instance of FileUploader with each URL and
// give each instance the filter too
var uploaders = $scope.uploaders = urls.map(function(url) {
    var uploader = new FileUploader({url: url});
    uploader.filters.push(filterObj);
    return uploader;
});

Template

<input type="file" id="fileInput" nv-file-select="" class="upload" uploader="uploaders[0]" />
<input type="file" id="fileInput" nv-file-select="" class="upload" uploader="uploaders[1]" />