Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support.
Lightweight Angular directive to upload files.
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.
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
- 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-requiredwith 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
