current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
2

here is how I use angular jquery file upload

var album = angular.module('album', ['restangular', 'blueimp.fileupload']),

.controller('somecontroller',function($scope,){
    $scope.options = {
        something
    }

 })

all I did was set the scope.options, change the controller ,and everything just magically works

setup the jquery file upload seems quite easy, but there are something really confuse me

how can I call the jquery file upload's callback function. for example, if the files uploaded successfully,I want to update the ui by calling fileuploaddone function ,it confuse me because there is no added file in my controller.

I'm new to angularJS, please help me to understand the workflow of angular jquery file upload

share|improve this question

1 Answer 1

up vote 16 down vote accepted

the blueimp.fileupload uses events that are fired via $emit to notify parent scopes:

             on([
                'fileuploadadd',
                'fileuploadsubmit',
                'fileuploadsend',
                'fileuploaddone',
                'fileuploadfail',
                'fileuploadalways',
                'fileuploadprogress',
                'fileuploadprogressall',
                'fileuploadstart',
                'fileuploadstop',
                'fileuploadchange',
                'fileuploadpaste',
                'fileuploaddrop',
                'fileuploaddragover',
                'fileuploadchunksend',
                'fileuploadchunkdone',
                'fileuploadchunkfail',
                'fileuploadchunkalways',
                'fileuploadprocessstart',
                'fileuploadprocess',
                'fileuploadprocessdone',
                'fileuploadprocessfail',
                'fileuploadprocessalways',
                'fileuploadprocessstop'
            ].join(' '), function (e, data) {
                if ($scope.$emit(e.type, data).defaultPrevented) {
                    e.preventDefault();
                }
            })

That means that you can simply add an event listener in one of the parent scope controllers, e.g.:

$scope.$on('fileuploadprocessdone', function(event, files){ 
    $.each(files, function (index, file) {
        //do what you want
    });
});

You can also override the default handleResponse function in your config phase, e.g.:

angular.module('myApp', ['blueimp.fileupload']).
.config(['fileUploadProvider', function (fileUploadProvider){
    fileUploadProvider.defaults.handleResponse = function (e,data){
        var files = data.result && data.result.files;
        if (files) {
            data.scope().replace(data.files, files);
            // do what you want...
        } else if (data.errorThrown || data.textStatus === 'error') {
             data.files[0].error = data.errorThrown ||
             data.textStatus;
        }
     };     
}]);
share|improve this answer
1  
really helpful! thank you so much –  paynestrike Jul 23 '13 at 2:12
    
+1 but Worth noting that if you use angular's $scope.$on() to bind (v1.1.5) as opposed to jQuery's $element.on() it does NOT currently accept a list of event names like the jquery version. IOW, you CANNOT do this $scope.$on(['idontwork', 'nor-me'].join(' ')], function(){}). Caught me out. See groups.google.com/forum/#!topic/angular/Ilv1uPOTxgY –  cirrus Sep 13 '13 at 14:33
    
take care that the second parameter from the event callback is the fileupload instance instead of an array with files. use function(event, fileuploader) { console.log(fileuploader.files); }) instead. –  paul Feb 19 at 8:35
    
And what about fileuploadDESTROY? –  Ulrira Jun 17 at 14:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.