I have followed the following tutorial in order to integrate the notorious bluimp jQuery file uploader in my AngularJS project.<\/p>\n
After some research I found that in the options array, witihn the jquery.fileuploader.js file, there is an option called autoUpload, which when set to true upload the file automatically. I tried to disable it(false, undefined), but quickly I learned out that this causes the upload not to function at all, not even on the form submit.<\/p>\n
I need to trigger the upload manually, say within another callback, or by a click event. can that be done?.<\/p>\n
code:<\/p>\n
app.directive(\"fileupload\", function() {\n return {\n restrict: \"A\",\n scope: {\n done: \"&\",\n progress: \"&\",\n fail: \"&\",\n uploadurl: \"=\",\n customdata: \"&\"\n },\n link: function(scope, elem, attrs) {\n var uploadOptions;\n uploadOptions = {\n url: scope.uploadurl,\n dataType: \"json\"\n };\n if (scope.done) {\n uploadOptions.done = function(e, data) {\n return scope.$apply(function() {\n return scope.done({\n e: e,\n data: data\n });\n });\n };\n }\n if (scope.fail) {\n uploadOptions.fail = function(e, data) {\n return scope.$apply(function() {\n return scope.fail({\n e: e,\n data: data\n });\n });\n };\n }\n if (scope.progress) {\n uploadOptions.progress = function(e, data) {\n return scope.$apply(function() {\n return scope.progress({\n e: e,\n data: data\n });\n });\n };\n }\n return elem.fileupload(uploadOptions).bind(\"fileuploadsubmit\", function(e, data) {\n return data.formData = {\n JSON.stringify(scope.customdata())\n };\n });\n }\n };\n });\napp.service('uploadService', function(authService) {\n var initializeFn, processFn;\n initializeFn = function(e, data, process) {\n var upload;\n return upload = {\n message: '',\n uploadurl: authService.getBaseUrl() + '\/applications\/',\n status: false\n };\n };\n processFn = function(e, data, process) {\n var file, upload;\n upload = {};\n upload.successData = [];\n upload.status = true;\n upload.error = false;\n if (process === 'done') {\n upload.message = data.result.result;\n console.log(data);\n file = data.result.resume;\n upload.successData = {\n \/\/ name: file.name,\n \/\/ fullUrl: file.url,\n \/\/ thumbUrl: file.thumbnail_url\n };\n } else if (process === 'progress') {\n upload.message = 'Uploading....!!!';\n } else {\n upload.error = true;\n upload.message = 'Please try again';\n console.log(e, data);\n }\n return upload;\n };\n return {\n process: processFn,\n initialize: initializeFn\n };\n\n });\n\napp.controller('applyCtrl', function($scope, $routeParams, uploadService){\n $scope.model.formData = {};\n $scope.model.formData.job = $routeParams.jobId;\n $scope.uploadLayer = function(e, data, process) {\n return $scope.uploadReturn = uploadService.process(e, data, process);\n };\n $scope.customData = function() {\n return $scope.model.formData;\n };\n return $scope.uploadReturn = uploadService.initialize();\n\n});\n<\/code><\/pre>\nview:<\/p>\n
\n \n \n \n \n \n \n \n \n<\/code><\/pre>\nscripts loading order:<\/p>\n
...\n \n \n \n \n \n \n \n \n \n \n \n\n\n<\/code><\/pre>\n\n- \n
Blueimp has an AngularJS version of jQuery File Upload available.<\/p>\n
It includes a fileUpload<\/code> directive and a FileUploadController<\/code> with a submit()<\/code> method that you can call manually.<\/p>\nYou can see a working version at http:\/\/blueimp.github.io\/jQuery-File-Upload\/angularjs.html.<\/p>\n
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).<\/p>\n
Hope that helps!<\/p>\n
UPDATE AFTER YOUR COMMENT:<\/p>\n
When using the AngularJS version of jQuery File Upload, you create a form tag with the file-upload<\/code> attribute like this:<\/p>\n\n\n\n \n \n Add files...\n \n \n\n \n \n Start upload\n \n\n\n<\/code><\/pre>\nThen in your controller you can assign the options for the jQuery File Upload like this:<\/p>\n
angular.module('yourModule')\n .controller('YourController', [$scope, function($scope){\n\n \/\/ Options you want to pass to jQuery File Upload e.g.:\n $scope.options = {\n maxFileSize: 5000000,\n acceptFileTypes: \/(\\.|\\\/)(gif|jpe?g|png)$\/i\n };\n }]);\n<\/code><\/pre>\nYou can assign the submit()<\/code> handler to any ng-click<\/code> attribute as long as it is inside the form (and thus can access the method).<\/p>\nLet me know if you need further help…<\/p>\n
EXTRA SAMPLE CODE FOR SUCCESS CALLBACK:<\/p>\n
If you need to run a callback function after all<\/strong> uploads have been completed, you can listen to the fileuploadstop<\/code> event that is broadcasted by Blueimp:<\/p>\n\/\/ Listen to fileuploadstop event\n$scope.$on('fileuploadstop', function(){\n\n \/\/ Your code here\n console.log('All uploads have finished');\n});\n<\/code><\/pre>\nHope that helps!<\/p>\n<\/li>\n<\/ol>\n
Originally posted 2013-12-02 01:20:48. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
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 options array, witihn the jquery.fileuploader.js file, there is an option called autoUpload, which when set to true upload the file automatically. I tried to disable it(false, undefined), […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1769","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1769"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1769\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}