Lightweight Angular directive to upload files – ng-file-upload

by Posted on

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




Installing using NPM

npm install ng-file-upload

Libraries

Use following libraries to enable file upload system using angular js.

<script src="angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="ng-file-upload-shim.min.js"></script>
<script src="ng-file-upload.min.js"></script>

HTML

Create file upload form and display uploaded images.

Upload on form submit or button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  Single Image with validations
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image
  *data: {key: file, otherInfo: uploadInfo},
  
  objectKey: '[k]' or '.k' 
  
  arrayKey: '[i]' or '[]' or '.i' or '' 
  method: 'POST' or 'PUT'(html5), default POST,
  headers: {'Authorization': 'xxx'}, 
  withCredentials: boolean,
  
  resumeSizeUrl: '/uploaded/size/url?file=' + file.name 
  resumeSizeResponseReader: function(data) {return data.size;} 
  resumeSize: function() {return promise;} 
                                            
  resumeChunkSize: 10000 or '10KB' or '10MB' 
  disableProgress: boolean 
  ... and all other angular $http() options could be used here.
})
 

upload.then(function(resp) {
  
  console.log('file ' + resp.config.data.file.name + 'is uploaded successfully. Response: ' + resp.data);
}, function(resp) {
  
}, function(evt) {
  
  console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :'+ evt.config.data.file.name);
});
upload.catch(errorCallback);
upload.finally(callback, notifyCallback);
 

upload.xhr(function(xhr){
  xhr.upload.addEventListener(...)
});
 

upload.abort();
 

Upload.http({
  url: '/server/upload/url',
  headers : {
    'Content-Type': file.type
  },
  data: file
})
 

Upload.setDefaults({ngfMinSize: 20000, ngfMaxSize:20000000, ...})
 




Upload.defaults.blobUrlsMaxMemory = 268435456 
Upload.defaults.blobUrlsMaxQueueSize = 200 
 

Upload.base64DataUrl(files).then(function(urls){...});
 

Upload.dataUrl(file, boolean).then(function(url){...});
 

Upload.imageDimensions(file).then(function(dimensions){console.log(dimensions.width, dimensions.height);});
 

Upload.mediaDuration(file).then(function(durationInSeconds){...});
 



Upload.resize(file, options).then(function(resizedFile){...});
 

Upload.isResizeSupported()

Upload.isResumeSupported()
 

Upload.rename(file, newName)

Upload.jsonBlob(obj)

Upload.json(obj)

var blob = upload.dataUrltoBlob(dataurl, name);

Upload.isUploadInProgress() boolean

Upload.urlToBlob(url).then(function(blob) {...});

Upload.isFile(obj);

Upload.applyExifRotation(file).then(...)

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by danialfarid. Visit their official github repository for more information and follow for future updates.


Published by admin