ng-file-upload

Lightweight Angular directive to upload files.

See the DEMO page. Reference docs here

Migration notes: version 3.0.x version 3.1.x version 3.2.x version 4.x.x version 5.x.x version 6.x.x version 6.2.x version 7.0.x version 7.2.x version 8.0.x version 9.0.x version 10.0.x version 11.0.x version 12.0.x version 12.1.x version 12.2.x

Ask questions on StackOverflow under the ng-file-upload tag.

For bug report or feature request please search through existing issues first then open a new one here. For faster response provide steps to reproduce/versions with a jsfiddle link. If you need support for your company contact me.

If you like this plugin give it a thumbs up at ngmodules or get me a cup of tea . Contributions are welcomed.

Table of Content: * Features * Install (Manual, Bower, NuGet, NPM) * Usage * Old Browsers * Server Side * Samples (Java, Spring, Node.js, Rails, PHP, .Net) * CORS * Amazon S3 Upload

Features

• file upload progress, cancel/abort
• file drag and drop (html5 only)
• image paste from clipboard and drag and drop from browser pages (html5 only).
• image resize and center crop (native) and user controlled crop through ngImgCrop. See crop sample (html5 only)
• orientation fix for jpeg image files with exif orientation data
• resumable uploads: pause/resume upload (html5 only)
• native validation support for file type/size, image width/height/aspect ratio, video/audio duration, and ng-required with pluggable custom sync or async validations.
• show thumbnail or preview of selected images/audio/videos
• supports CORS and direct upload of file's binary data using Upload.$http()
• plenty of sample server side code, available on nuget
• on demand flash FileAPI shim loading no extra load for html5 browsers.
• HTML5 FileReader.readAsDataURL shim for IE8-9
• available on npm, bower, meteor, nuget

Install

• Manual: download latest from here
• Bower:
• bower install ng-file-upload-shim --save(for non html5 suppport)
• bower install ng-file-upload --save
• NuGet: PM> Install-Package angular-file-upload (thanks to Georgios Diamantopoulos)
• NPM: npm install ng-file-upload

<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/angular(.min).js"></script>
<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/ng-file-upload-shim(.min).js"></script> 
<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/ng-file-upload(.min).js"></script>

Usage

Samples:

• Upload with form submit and validations: http://jsfiddle.net/danialfarid/maqbzv15/1118/
• Upload multiple files one by one on file select: http://jsfiddle.net/danialfarid/2vq88rfs/136/
• Upload multiple files in one request on file select (html5 only): http://jsfiddle.net/danialfarid/huhjo9jm/5/
• Upload single file on file select: http://jsfiddle.net/danialfarid/0mz6ff9o/135/
• Drop and upload with $watch: http://jsfiddle.net/danialfarid/s8kc7wg0/400/
• Image Crop and Upload http://jsfiddle.net/danialfarid/xxo3sk41/590/

<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/angular.min.js"></script>

<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/ng-file-upload-shim.min.js"></script>
<script src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/ng-file-upload.min.js"></script>

Upload on form submit or button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  Single Image with validations


Select


  Multiple files


Select


  Drop files: 

Drop


  <button type="submit" ng-click="submit()">submit</button>
</form>

Upload right away after file selection:


Upload on file select




Upload on file select


  Drop File:


Drop Images or PDFs files here




File Drag/Drop is not supported for this browser



Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
Audio preview: <audio controls ngf-src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/file"></audio>
Video preview: <video controls ngf-src="https://github.com/danialfarid/ng-file-upload/raw/12.2.13/file"></video>

Javascript code:

//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.submit = function() {
      if ($scope.form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // upload on file select or drop
    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
    // for multiple files:
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);

Full reference

File select and drop

At least one of the ngf-select or ngf-drop are mandatory for the plugin to link to the element. ngf-select only attributes are marked with * and ngf-drop only attributes are marked with +.

```html <div|button|input type="file"|ngf-select|ngf-drop... ngf-select="" or "upload($files, ...)" // called when files are selected or cleared ngf-drop="" or "upload($files, ...)" // called when files being dropped // You can use ng-model or ngf-change instead of specifying function for ngf-drop and ngf-select // function parameters are the same as ngf-change ngf-change="upload($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)" // called when files are selected, dropped, or cleared ng-model="myFiles" // binds the valid selected/dropped file or files to the scope model // could be an array or single file depending on ngf-multiple and ngf-keep values. ngf-model-options="{updateOn: 'change click drop dropUrl paste', allowInvalid: false, debounce: 0}" // updateOn could be used to disable resetting on click, or updating on paste, browser image drop, etc. // allowInvalid default is false could allow invalid files in the model // debouncing will postpone model update (miliseconds). See angular ng-model-options for more details. ngf-model-invalid="invalidFile(s)" // binds the invalid selected/dropped file or files to this model. ngf-before-model-change="beforeChange($files, ...)" // called after file select/drop and before // model change, validation and resize is processed ng-disabled="boolean" // disables this element ngf-select-disabled="boolean" // default false, disables file select on this element ngf-drop-disabled="boolean" // default false, disables file drop on this element ngf-multiple="boolean" // default false, allows selecting multiple files ngf-keep="true|false|'distinct'" // default false, keep the previous ng-model files and // append the new files. "'distinct'" removes duplicate files // $newFiles and $duplicateFiles are set in ngf-change/select/drop functions. ngf-fix-orientation="boolean" //default false, would rotate the jpeg image files that have // exif orientation data. See #745. Could be a boolean function like shouldFixOrientation($file) // to decide wethere to fix that file or not.

ngf-capture="'camera'" or "'other'" // allows mobile devices to capture using camera ngf-accept="'image/*'" // standard HTML accept attr, browser specific select popup window

+ngf-allow-dir="boolean" // default true, allow dropping files only for Chrome webkit browser +ngf-include-dir="boolean" //default false, include directories in the dropped file array. //You can detect if they are directory or not by checking the type === 'directory'. +ngf-drag-over-class="{pattern: 'image/', accept:'acceptClass', reject:'rejectClass', delay:100}" or "'myDragOverClass'" or "calcDragOverClass($event)" // default "dragover". drag over css class behaviour. could be a string, a function // returning class name or a json object. // accept/reject class only works in Chrome, validating only the file mime type. // if pattern is not specified ngf-pattern will be used. See following docs for more info. +ngf-drag="drag($isDragging, $class, $event)" // function called on drag over/leave events. // $isDragging: boolean true if is dragging over(dragover), false if drag has left (dragleave) // $class is the class that is being set for the element calculated by ngf-drag-over-class +ngf-drop-available="dropSupported" // set the value of scope model to true or false based on file // drag&drop support for this browser +ngf-stop-propagation="boolean" // default false, whether to propagate drag/drop events. +ngf-hide-on-drop-not-available="boolean" // default false, hides element if file drag&drop is not +ngf-enable-firefox-paste="boolean" // experimental* default false, enable firefox image paste by making element contenteditable

ngf-resize="{width: 100, height: 100, quality: .8, type: 'image/jpeg', ratio: '1:2', centerCrop: true, pattern='.jpg', restoreExif: false}"