Name: angular-file
Owner: Radify
Description: Native file upload handling for AngularJS
Created: 2013-02-20 16:59:35.0
Updated: 2018-01-19 10:21:19.0
Pushed: 2015-08-20 18:58:45.0
Homepage: null
Size: 185
Language: null
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
l ng-app="myApp">
d>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-resource.min.js"></script>
<script src="angular-file.js"></script>
<script>
var app = angular.module('myApp', ['ur.file', 'ngResource']);
app.controller('FileController', function($scope, $resource) {
var Files = $resource('/files/:id', { id: "@id" });
angular.extend($scope, {
model: { file: null },
upload: function(model) {
Files.prototype.$save.call(model.file, function(self, headers) {
// Handle server response
});
}
});
});
</script>
ad>
y ng-controller="FileController">
<input type="file" ng-model="model.file" change="upload(model)" />
dy>
ml>
ng-model
: You can now use it for <input type="file" />
elements, just like normal. Bind it to a scope property, and it will be assigned a File
object when the file input is populated. However, this is effectively a read-only property, due to the security restrictions around manipulating file uploads with JavaScript.
change
: Typical change event. Triggered when a file is selected.
Files.prototype.$save.call()
: Treats the file object as an instance of $resource
, and POSTs the raw contents of the file to the configured URL. The upload handler also sets four headers: X-File-Name
, X-File-Size
, X-File-Last-Modified
, and Content-Type
.
The X-File-Name
header is encoded with URL encoding.