Native file upload handling for AngularJS

Added by: Sam Deering





Stars: 87

Watchers: 87

Forks: 34



Module Description

ur.file: Native HTML5-based file input bindings for AngularJS


<html ng-app="myApp">
    <script src=""></script>
    <script src=""></script>
    <script src="angular-file.js"></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.$, function(self, headers) {
                        // Handle server response
<body ng-controller="FileController">
    <input type="file" ng-model="model.file" change="upload(model)" />

What's happening here?

  • 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.$ 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.

Module stats last updated: 2018-01-12 15:00:09

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!