diff --git a/README.md b/README.md
index ebd4a85d..6b611800 100644
--- a/README.md
+++ b/README.md
@@ -154,127 +154,129 @@ At least one of the `ngf-select` or `ngf-drop` are mandatory for the plugin to l
```html
+ ngf-drop="" or "upload($files, ...)"
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="myFiles"
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-model-invalid="invalidFile(s)"
+ ngf-before-model-change="beforeChange($files, ...)"
+ ng-disabled="boolean"
+ ngf-select-disabled="boolean"
+ ngf-drop-disabled="boolean"
+ ngf-multiple="boolean"
+ ngf-keep="true|false|'distinct'"
+ ngf-fix-orientation="boolean"
+
+ *ngf-capture="'camera'" or "'other'"
+ *ngf-accept="'image/*'"
+
+ +ngf-allow-dir="boolean"
+ +ngf-include-dir="boolean"
+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-drag="drag($isDragging, $class, $event)"
+ +ngf-drop-available="dropSupported"
+ +ngf-stop-propagation="boolean"
+ +ngf-hide-on-drop-not-available="boolean"
+ +ngf-enable-firefox-paste="boolean"
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.
+ or resizeOptions()
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-validate-after-resize="boolean"
+
+
+ ngf-max-files="10"
+ ngf-pattern="'.pdf,.jpg,video/*,!.jog'"
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-ratio="8:10,1.6"
+ ngf-min-ratio, ngf-max-ratio="8:10"
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.
+
+ ngf-validate-fn="validate($file)"
+ ngf-validate-async-fn="validate($file)"
+ ngf-validate-force="boolean"
+ ngf-ignore-invalid="'pattern maxSize'"
+ ngf-run-all-validations="boolean"
>Upload/Drop
File Drag/drop is not supported
-// filter to convert the file to base64 data url.
+
image
```
#### File preview
```html
+ *ngf-background="file"
+ ngf-resize="{width: 20, height: 20, quality: 0.9}"
+ ngf-no-object-url="true or false"
>
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.
+
+ ngf-as-background="boolean"
>
```