人生在世，看得透，又看得远者prevail everywhere.: ng-file-upload

Wednesday 1 January 2020

ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support.

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="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> 
<script src="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/

from https://github.com/danialfarid/ng-file-upload

Total Pageviews