angular file upload

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

The Service

var upload = Upload.upload({
  *url: 'server/upload/url', // upload.php script, node.js route, or servlet url
  /*
  Specify the file and optional data to be sent to the server.
  Each field including nested objects will be sent as a form data multipart.
  Samples: {pic: file, username: username}
    {files: files, otherInfo: {id: id, person: person,...}} multiple files (html5)
    {profiles: {[{pic: file1, username: username1}, {pic: file2, username: username2}]} nested array multiple files (html5)
    {file: file, info: Upload.json({id: id, name: name, ...})} send fields as json string
    {file: file, info: Upload.jsonBlob({id: id, name: name, ...})} send fields as json blob, 'application/json' content_type
    {picFile: Upload.rename(file, 'profile.jpg'), title: title} send file with picFile key and profile.jpg file name*/
  *data: {key: file, otherInfo: uploadInfo},
  /*
  This is to accommodate server implementations expecting nested data object keys in .key or [key] format.
  Example: data: {rec: {name: 'N', pic: file}} sent as: rec[name] -> N, rec[pic] -> file  
     data: {rec: {name: 'N', pic: file}, objectKey: '.k'} sent as: rec.name -> N, rec.pic -> file */  
  objectKey: '[k]' or '.k' // default is '[k]'
  /*
  This is to accommodate server implementations expecting array data object keys in '[i]' or '[]' or 
  ''(multiple entries with same key) format.
  Example: data: {rec: [file[0], file[1], ...]} sent as: rec[0] -> file[0], rec[1] -> file[1],...  
    data: {rec: {rec: [f[0], f[1], ...], arrayKey: '[]'} sent as: rec[] -> f[0], rec[] -> f[1],...*/  
  arrayKey: '[i]' or '[]' or '.i' or '' //default is '[i]'
  method: 'POST' or 'PUT'(html5), default POST,
  headers: {'Authorization': 'xxx'}, // only for html5
  withCredentials: boolean,
  /*
  See resumable upload guide below the code for more details (html5 only) */
  resumeSizeUrl: '/uploaded/size/url?file=' + file.name // uploaded file size so far on the server.
  resumeSizeResponseReader: function(data) {return data.size;} // reads the uploaded file size from resumeSizeUrl GET response
  resumeSize: function() {return promise;} // function that returns a prommise which will be
                                            // resolved to the upload file size on the server.
  resumeChunkSize: 10000 or '10KB' or '10MB' // upload in chunks of specified size
  disableProgress: boolean // default false, experimental as hotfix for potential library conflicts with other plugins
  ... and all other angular $http() options could be used here.
})

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

THE ATTRIBUTES:

<div|button|input type="file"|ngf-select|ngf-drop...
  ngf-select="" or "upload($files, ...)" // called when files are selected or cleared
  ngf-drop="" or "upload($files, ...)" // called when files being dropped
    // You can use ng-model or ngf-change instead of specifying function for ngf-drop and ngf-select
    // function parameters are the same as ngf-change
  ngf-change="upload($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)"
    // called when files are selected, dropped, or cleared
  ng-model="myFiles" // binds the valid selected/dropped file or files to the scope model
    // could be an array or single file depending on ngf-multiple and ngf-keep values.
  ng-model-options="{updateOn: 'change click drop dropUrl paste', allowInvalid: false, debounce: 0}"
    // updateOn could be used to disable resetting on click, or updating on paste, browser image drop, etc. 
    // allowInvalid default is false could allow invalid files in the model
    // debouncing will postpone model update (miliseconds). See angular ng-model-options for more details.
  ngf-model-invalid="invalidFile(s)" // binds the invalid selected/dropped file or files to this model.
  ngf-before-model-change="beforeChange($files, ...)" // called after file select/drop and before 
    // model change, validation and resize is processed
  ng-disabled="boolean" // disables this element
  ngf-select-disabled="boolean" // default false, disables file select on this element
  ngf-drop-disabled="boolean" // default false, disables file drop on this element
  ngf-multiple="boolean" // default false, allows selecting multiple files
  ngf-keep="true|false|'distinct'" // default false, keep the previous ng-model files and 
    // append the new files. "'distinct'" removes duplicate files
    // $newFiles and $duplicateFiles are set in ngf-change/select/drop functions.
  ngf-fix-orientation="boolean" //default false, would rotate the jpeg image files that have
    // exif orientation data. See #745. Could be a boolean function like shouldFixOrientation($file) 
    // to decide wethere to fix that file or not.

  *ngf-capture="'camera'" or "'other'" // allows mobile devices to capture using camera
  *ngf-accept="'image/*'" // standard HTML accept attr, browser specific select popup window

  +ngf-allow-dir="boolean" // default true, allow dropping files only for Chrome webkit browser
  +ngf-include-dir="boolean" //default false, include directories in the dropped file array. 
    //You can detect if they are directory or not by checking the type === 'directory'.
  +ngf-drag-over-class="{pattern: 'image/*', accept:'acceptClass', reject:'rejectClass', delay:100}" 
                    or "'myDragOverClass'" or "calcDragOverClass($event)"
    // default "dragover". drag over css class behaviour. could be a string, a function 
    // returning class name or a json object.
    // accept/reject class only works in Chrome, validating only the file mime type.
    // if pattern is not specified ngf-pattern will be used. See following docs for more info.
  +ngf-drag="drag($isDragging, $class, $event)" // function called on drag over/leave events.
    // $isDragging: boolean true if is dragging over(dragover), false if drag has left (dragleave)
    // $class is the class that is being set for the element calculated by ngf-drag-over-class
  +ngf-drop-available="dropSupported" // set the value of scope model to true or false based on file
                                     // drag&drop support for this browser
  +ngf-stop-propagation="boolean" // default false, whether to propagate drag/drop events.
  +ngf-hide-on-drop-not-available="boolean" // default false, hides element if file drag&drop is not
  +ngf-enable-firefox-paste="boolean" // *experimental* default false, enable firefox image paste by making element contenteditable

  ngf-resize="{width: 100, height: 100, quality: .8, type: 'image/jpeg', 
               ratio: '1:2', centerCrop: true, pattern='.jpg', restoreExif: false}" 
               or resizeOptions() // a function returning a promise which resolves into the options.
    // resizes the image to the given width/height or ratio. Quality is optional between 0.1 and 1.0), 
    // type is optional convert it to the given image type format.
    // centerCrop true will center crop the image if it does not fit within the given width/height or ratio. 
    // centerCrop false (default) will not crop the image and will fit it within the given width/height or ratio 
    // so the resulting image width (or height) could be less than given width (or height).
    // pattern is to resize only the files that their name or type matches the pattern similar to ngf-pattern.
    // restoreExif boolean default true, will restore exif info on the resized image.
  ngf-resize-if="$width > 1000 || $height > 1000" or "resizeCondition($file, $width, $height)"
    // apply ngf-resize only if this function returns true. To filter specific images to be resized.
  ngf-validate-after-resize="boolean" // default false, if true all validation will be run after 
    // the images are being resized, so any validation error before resize will be ignored.

  //validations:
  ngf-max-files="10" // maximum number of files allowed to be selected or dropped, validate error name: maxFiles
  ngf-pattern="'.pdf,.jpg,video/*,!.jog'" // comma separated wildcard to filter file names and types allowed
              // you can exclude specific files by ! at the beginning.
              // validate error name: pattern
  ngf-min-size, ngf-max-size, ngf-max-total-size="100" in bytes or "'10KB'" or "'10MB'" or "'10GB'"
              // validate as form.file.$error.maxSize=true and file.$error='maxSize'
              // ngf-max-total-size is for multiple file select and validating the total size of all files.
  ngf-min-height, ngf-max-height, ngf-min-width, ngf-max-width="1000" in pixels only images
              // validate error name: maxHeight
  ngf-ratio="8:10,1.6" // list of comma separated valid aspect ratio of images in float or 2:3 format
              // validate error name: ratio
  ngf-min-ratio, ngf-max-ratio="8:10" // min or max allowed aspect ratio for the image.
  ngf-dimensions="$width > 1000 || $height > 1000" or "validateDimension($file, $width, $height)"
              // validate the image dimensions, validate error name: dimensions
  ngf-min-duration, ngf-max-duration="100.5" in seconds or "'10s'" or "'10m'" or "'10h'" only audio, video
              // validate error name: maxDuration
  ngf-duration="$duration > 1000" or "validateDuration($file, $duration)"
              // validate the media duration, validate error name: duration

  ngf-validate="{size: {min: 10, max: '20MB'}, width: {min: 100, max:10000}, height: {min: 100, max: 300}
                ratio: '2x1', duration: {min: '10s', max: '5m'}, pattern: '.jpg'}"
                shorthand form for above validations in one place.
  ngf-validate-fn="validate($file)" // custom validation function, return boolean or string containing the error.
              // validate error name: validateFn
  ngf-validate-async-fn="validate($file)" // custom validation function, return a promise that resolve to
              // boolean or string containing the error. validate error name: validateAsyncFn
  ngf-validate-force="boolean" // default false, if true file.$error will be set if the dimension or duration
              // values for validations cannot be calculated for example image load error or unsupported video by the browser.
              // by default it would assume the file is valid if the duration or dimension cannot be calculated by the browser.

>Upload/Drop</div>

<div|... ngf-no-file-drop>File Drag/drop is not supported</div>

// filter to convert the file to base64 data url.
<a href="file | ngfDataUrl">image</a>
Advertisements
This entry was posted in Angularjs. Bookmark the permalink.

2 Responses to angular file upload

  1. kevinw8801 says:

    ngf-drag-over-class=”{ accept:’dragover’, reject:’dragover-err’, delay:100}”
    => specify the css class to be used when the file is accepted (dragover)
    or there is error (dragover-err)

  2. kevinw8801 says:

    the attributes

    1000 || $height > 1000″ or “resizeCondition($file, $width, $height)”
    // apply ngf-resize only if this function returns true. To filter specific images to be resized.
    ngf-validate-after-resize=”boolean” // default false, if true all validation will be run after
    // the images are being resized, so any validation error before resize will be ignored.

    //validations:
    ngf-max-files=”10″ // maximum number of files allowed to be selected or dropped, validate error name: maxFiles
    ngf-pattern=”‘.pdf,.jpg,video/*,!.jog'” // comma separated wildcard to filter file names and types allowed
    // you can exclude specific files by ! at the beginning.
    // validate error name: pattern
    ngf-min-size, ngf-max-size, ngf-max-total-size=”100″ in bytes or “’10KB'” or “’10MB'” or “’10GB'”
    // validate as form.file.$error.maxSize=true and file.$error=’maxSize’
    // ngf-max-total-size is for multiple file select and validating the total size of all files.
    ngf-min-height, ngf-max-height, ngf-min-width, ngf-max-width=”1000″ in pixels only images
    // validate error name: maxHeight
    ngf-ratio=”8:10,1.6″ // list of comma separated valid aspect ratio of images in float or 2:3 format
    // validate error name: ratio
    ngf-min-ratio, ngf-max-ratio=”8:10″ // min or max allowed aspect ratio for the image.
    ngf-dimensions=”$width > 1000 || $height > 1000″ or “validateDimension($file, $width, $height)”
    // validate the image dimensions, validate error name: dimensions
    ngf-min-duration, ngf-max-duration=”100.5″ in seconds or “’10s'” or “’10m'” or “’10h'” only audio, video
    // validate error name: maxDuration
    ngf-duration=”$duration > 1000″ or “validateDuration($file, $duration)”
    // validate the media duration, validate error name: duration

    ngf-validate=”{size: {min: 10, max: ’20MB’}, width: {min: 100, max:10000}, height: {min: 100, max: 300}
    ratio: ‘2×1′, duration: {min: ’10s’, max: ‘5m’}, pattern: ‘.jpg’}”
    shorthand form for above validations in one place.
    ngf-validate-fn=”validate($file)” // custom validation function, return boolean or string containing the error.
    // validate error name: validateFn
    ngf-validate-async-fn=”validate($file)” // custom validation function, return a promise that resolve to
    // boolean or string containing the error. validate error name: validateAsyncFn
    ngf-validate-force=”boolean” // default false, if true file.$error will be set if the dimension or duration
    // values for validations cannot be calculated for example image load error or unsupported video by the browser.
    // by default it would assume the file is valid if the duration or dimension cannot be calculated by the browser.

    >Upload/Drop

    File Drag/drop is not supported

    // filter to convert the file to base64 data url.
    image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s