Angular JS file upload tool

Keywords: html5 angular AngularJS PHP

Detailed introduction of angular file upload

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.

Online demo


  • 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



            drop files here  HTML5 Drop File is not supported!  Cancel Upload


//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 /;
      }).success(function(data, status, headers, config{        // file is uploaded successfully
      });      //.error(...)
      //.then(success, error, progress); 
      // access or attach event listeners to the underlying XMLHttpRequest.
    }    /* 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.

Posted by aeafisme23 on Thu, 13 Feb 2020 11:50:17 -0800