<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

<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>
 
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/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
    ngf-resize="{width: 100, height: 100}">Select</div>
  Multiple files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>
 
Upload right away after file selection:
<div class="button" ngf-select="upload($file)">Upload on file select</div>
<div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
  Drop File:
<div ngf-drop="uploadFiles($files)" class="drop-box"
  ngf-drag-over-class="'dragover'" ngf-multiple="true" 
  ngf-pattern="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
 
Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

<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.
  ngf-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 names: minHeight, maxHeight, minWidth, maxWidth
  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.
  ngf-ignore-invalid="'pattern maxSize'" // ignore the files that fail the specified validations. They will 
              // just be ignored and will not show up in ngf-model-invalid or make the form invalid.
              // space separated list of validate error names.
  ngf-run-all-validations="boolean" // default false. Runs all the specified validate directives. By default
              // once a validation fails for a file it would stop running other validations for that file.
 
>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>

<img|audio|video|div
  *ngf-src="file" //To preview the selected file, sets src attribute to the file data url.
  *ngf-background="file" //sets background-image style to the file data url.
  ngf-resize="{width: 20, height: 20, quality: 0.9}" // only for image resizes the image before setting it
             // as src or background image. quality is optional.
  ngf-no-object-url="true or false" // see #887 to force base64 url generation instead of object url. Default false
>
 
<div|span|...
 *ngf-thumbnail="file" //Generates a thumbnail version of the image file
 ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
        // if not specified will be resized to this element`s client width and height.
 ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>

<script>
    //optional need to be loaded before angular-file-upload-shim(.min).js 
    FileAPI = {
        //only one of jsPath or jsUrl. 
        jsPath: '/js/FileAPI.min.js/folder/',
        jsUrl: 'yourcdn.com/js/FileAPI.min.js',
 
        //only one of staticPath or flashUrl. 
        staticPath: '/flash/FileAPI.flash.swf/folder/',
        flashUrl: 'yourcdn.com/js/FileAPI.flash.swf',
 
        //forceLoad: true, html5: false //to debug flash in HTML5 browsers 
        //noContentTimeout: 10000 (see #528) 
    }
</script> 
<script src="angular-file-upload-shim.min.js"></script>...

httpResp.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS");
httpResp.setHeader("Access-Control-Allow-Origin", "your.other.server.com");
httpResp.setHeader("Access-Control-Allow-Headers", "Content-Type"));