Angular file upload sample

Play with options

Select File, Drop File or Paste Image

accept (for select browser dependent):
ngf-capture (for mobile):
ngf-pattern (validate file model):
ngf-validate:
ngf-multiple (allow multiple files)
ng-disabled
ngf-allow-dir (allow directory drop Chrome only)
ngf-keep (keep the previous model values in ng-model)
ngf-keep-distinct (do not allow duplicates)
ngf-valid-only (only valid files assigned to model)
ngf-reset-on-click
Upload resumable chunk size:

Preview image/audio/video:

Invalid File: {{f.$error}} {{f.$errorParam}}, {{f.name}} - size: {{f.size}}B - type: {{f.type}}
{{f.progress}}%
{{f.name}} - size: {{f.size}}B - type: {{f.type}} details
{{f.result}}
- file name: {{item.name}}
  
  name: {{item.fieldName}}
  
  size on the serve: {{item.size}}
  
  value: {{item.value}}
request headers: {{f.result.requestHeaders}}

How to upload to the server:

$upload.upload(): multipart/form-data upload cross browser
$upload.http(): binary content with file's Content-Type

Can be used to upload files directory into CouchDB, imgur, etc... without multipart form data (HTML5 FileReader browsers only)

Amazon S3 bucket upload

Return server error with http code: and message:

Angular file upload Demo

Visit ng-file-upload on github