Angular file upload is a lightweight AngularJS file upload tool. It is designed for the file API Polyfill which does not support browser, and uses HTML5 to upload files directly.
Characteristic
Support upload progress, cancel or abort when uploading, support file drag (HTML5), directory drag (weikit), CORS, PUT(html5)/POST methods
Support for Flash polyfill FileAPI Cross browser uploads (HTML5 and non HTML5). Allow clients to verify or modify files before uploading.
When the content type of the file uses $upload.http(), it supports direct upload to CouchDB, imgur, etc. Support the progress events of Angular http POST/PUT requests. For more information, see #88(comment)
Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)
Lightweight, using regular $http to upload (supports non HTML5 browsers), so provides all Angular $http features
Use
HTML:
drop files here HTML5 Drop File is not supported! Cancel Upload
JS:
//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) { var file = $files[i];
$scope.upload = $upload.upload({
url: 'server/upload/url', //upload.php script, node.js route, or servlet url
//method: 'POST' or 'PUT',
//headers: {'header-key': 'header-value'},
//withCredentials: true,
data: {myObj: $scope.myModelObj},
file: file, // or list of files ($files) for html5 only
//fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
// customize file formData name ('Content-Disposition'), server side file variable name.
//fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file'
// customize how data is added to formData. See #40#issuecomment-28612000 for sample code
//formDataAppender: function(formData, key, val){}
}).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) { // file is uploaded successfully
console.log(data);
}); //.error(...)
//.then(success, error, progress);
// access or attach event listeners to the underlying XMLHttpRequest.
//.xhr(function(xhr){xhr.upload.addEventListener(...)})
} /* alternative way of uploading, send the file binary with the file's content-type. Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. It could also be used to monitor the progress of a normal http post/put request with large data*/
// $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code.
};
}];