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:

<!-- Create a file upload form with options passed in from your scope -->
<form data-file-upload="options" data-ng-controller="YourController">

    <!-- This button will trigger a file selection dialog -->
    <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
        <span>Add files...</span>
        <input type="file" name="files[]" multiple="" ng-disabled="disabled">
    </span>

    <!-- This button will start the upload -->
    <button type="button" class="btn btn-primary start" data-ng-click="submit()">
        <span>Start upload</span>
    </button>

<form>

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!