Angular file upload sample

Upload right away

Attach an Image or PDF

File Drop not available

Drop Images or PDFs

click to select

Play with attributes ngf-accept (accept/reject file model):
accept (for select browser dependent):
ngf-capture (for mobile):
ngf-min-size:
ngf-max-size:
ngf-multiple (allow multiple files)
ng-disabled
ngf-allow-dir (allow directory drop Chrome only)

Select File or Drop

Preview image/audio/video:

Rejected file: {{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 intoCouchDB, 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