Uploading a file with AngularJS and bluimp on success callback of another form

Question

I have followed the following tutorial in order to integrate the notorious bluimp jQuery file uploader in my AngularJS project.

After some research I found that in the o

Answer 1

Blueimp has an AngularJS version of jQuery File Upload available.

It includes a fileUpload directive and a FileUploadController with a submit() method that you can call manually.

You can see a working version at http://blueimp.github.io/jQuery-File-Upload/angularjs.html.

One thing you should pay attention to: make sure you load all .js files from the example in the correct order to avoid problems (cf. source of the example page).

Hope that helps!

---

UPDATE AFTER YOUR COMMENT:

When using the AngularJS version of jQuery File Upload, you create a form tag with the file-upload attribute like this:

    
    
        Add files...
        
    

    
    
        Start upload
    

Then in your controller you can assign the options for the jQuery File Upload like this:

angular.module('yourModule')
    .controller('YourController', [$scope, function($scope){

        // Options you want to pass to jQuery File Upload e.g.:
        $scope.options = {
            maxFileSize: 5000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        };
    }]);

You can assign the submit() handler to any ng-click attribute as long as it is inside the form (and thus can access the method).

Let me know if you need further help...

---

EXTRA SAMPLE CODE FOR SUCCESS CALLBACK:

If you need to run a callback function after all uploads have been completed, you can listen to the fileuploadstop event that is broadcasted by Blueimp:

// Listen to fileuploadstop event
$scope.$on('fileuploadstop', function(){

    // Your code here
    console.log('All uploads have finished');
});

Hope that helps!