<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dist/assets/node_modules/dropify/README.md</h2><form method='post'><textarea name='content' class='file-edit'>![Dropify](src/images/cover.jpg)

Dropify
=========

Override your input files with style.

Demo here : [http://jeremyfagis.github.io/dropify](http://jeremyfagis.github.io/dropify/)


## Dependency

[jQuery](https://github.com/jquery/jquery) is required to do the magic.


## Installation

Clone the project in your workspace

	$ git clone git@github.com:JeremyFagis/dropify.git
	$ cd dropify

Download packages

	$ npm install

Compile assets

	$ gulp build


## Compilation

	# All compilations and watch. You will have minified and not minified files.
	$ gulp

	# Dev compilation (watch &amp; no-minification)
	$ gulp --dev

    # Prod compilation, you will have minified and not minified files
    $ gulp build

	# Prod compilation, you will have only minified files
	$ gulp build --dev


## NPM Package

[www.npmjs.com/package/dropify](https://www.npmjs.com/package/dropify)


## Usage

You have to include __[dist/js/dropify.js](dist/js/dropify.js)__, __[dist/css/dropify.css](dist/css/dropify.css)__ and __dist/fonts/*__ to your project, then you juste have to init the jQuery plugin like that :

```javascript
$('.dropify').dropify();
```

## Options

* __defaultFile:__ If there is a default file on the input. You can use options when you use the plugin or directly __data-default-file=&quot;url_of_your_file&quot;__ on you DOM element (it's recommended).

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-default-file=&quot;url_of_your_file&quot; /&gt;
```


* __height:__  Set the height of your dropify element. For exemple you want 300px height, you have to add the attribute __data-height=&quot;300&quot;__ on your DOM element.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-height=&quot;300&quot; /&gt;
```


* __maxFileSize:__  Set the max filesize of the uploaded document. An error will be display if the file size is bigger than the option. You can use unit like K, M and G.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-max-file-size=&quot;3M&quot; /&gt;
```


* __minWidth:__  Set the min width allowed. An error will be display if the width is smaller than the option.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-min-width=&quot;400&quot; /&gt;
```


* __maxWidth:__  Set the max width allowed. An error will be display if the width is bigger than the option.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-max-width=&quot;1000&quot; /&gt;
```


* __minHeight:__  Set the min height allowed. An error will be display if the width is smaller than the option.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-min-height=&quot;400&quot; /&gt;
```


* __maxHeight:__  Set the max height allowed. An error will be display if the width is bigger than the option.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-max-height=&quot;1000&quot; /&gt;
```


* __disabled:__  You can disable the input if you add the attr __disabled=&quot;disabled&quot;__.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; disabled=&quot;disabled&quot; /&gt;
```


* __showRemove:__  You can hide the remove button if you add the attr __data-show-remove=&quot;false&quot;__. Default: true.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-show-remove=&quot;false&quot; /&gt;
```


* __showLoader:__  You can hide the loader if you add the attr __data-show-loader=&quot;false&quot;__. Default: true.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-show-loader=&quot;false&quot; /&gt;
```


* __showErrors:__  You can hide errors if you add the attr __data-show-loader=&quot;false&quot;__. Default: true.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-show-errors=&quot;true&quot; /&gt;
```


* __errorsPosition:__  You can choose where you want to display the errors, overlay or outside. Default: overlay.

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-errors-position=&quot;outside&quot; /&gt;
```


* __allowedFormats:__  You can allow/deny pictures formats. If you add the attr __data-allowed-formats=&quot;portrait square&quot;__ only portrait and square picture will be allowed. Default: ['portrait', 'square', 'landscape'].

```html
&lt;input type=&quot;file&quot; class=&quot;dropify&quot; data-allowed-formats=&quot;portrait square&quot; /&gt;
```


* __messages:__  You can translate default messages. You juste have to add an options array when you init the plugin. This messages will be replaced in the __tpl__ option.

```javascript
$('.dropify').dropify({
    messages: {
        'default': 'Drag and drop a file here or click',
        'replace': 'Drag and drop or click to replace',
        'remove':  'Remove',
        'error':   'Ooops, something wrong appended.'
    }
}
```


* __error:__  You can translate default errors messages. You juste have to add an options array when you init the plugin. __{{ value }}__ text will be replaced by the option.

```javascript
$('.dropify').dropify({
    error: {
        'fileSize': 'The file size is too big ({{ value }} max).',
        'minWidth': 'The image width is too small ({{ value }}}px min).',
        'maxWidth': 'The image width is too big ({{ value }}}px max).',
        'minHeight': 'The image height is too small ({{ value }}}px min).',
        'maxHeight': 'The image height is too big ({{ value }}px max).',
        'imageFormat': 'The image format is not allowed ({{ value }} only).'
    }
}
```


* __tpl:__  You can update default template. You juste have to add an options array when you init the plugin.

```javascript
$('.dropify').dropify({
    tpl: {
        wrap:            '&lt;div class=&quot;dropify-wrapper&quot;&gt;&lt;/div&gt;',
        loader:          '&lt;div class=&quot;dropify-loader&quot;&gt;&lt;/div&gt;',
        message:         '&lt;div class=&quot;dropify-message&quot;&gt;&lt;span class=&quot;file-icon&quot; /&gt; &lt;p&gt;{{ default }}&lt;/p&gt;&lt;/div&gt;',
        preview:         '&lt;div class=&quot;dropify-preview&quot;&gt;&lt;span class=&quot;dropify-render&quot;&gt;&lt;/span&gt;&lt;div class=&quot;dropify-infos&quot;&gt;&lt;div class=&quot;dropify-infos-inner&quot;&gt;&lt;p class=&quot;dropify-infos-message&quot;&gt;{{ replace }}&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',
        filename:        '&lt;p class=&quot;dropify-filename&quot;&gt;&lt;span class=&quot;file-icon&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dropify-filename-inner&quot;&gt;&lt;/span&gt;&lt;/p&gt;',
        clearButton:     '&lt;button type=&quot;button&quot; class=&quot;dropify-clear&quot;&gt;{{ remove }}&lt;/button&gt;',
        errorLine:       '&lt;p class=&quot;dropify-error&quot;&gt;{{ error }}&lt;/p&gt;',
        errorsContainer: '&lt;div class=&quot;dropify-errors-container&quot;&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;'
    }
}
```


## Events

* __dropify.beforeClear:__  This event is called when you click on the &quot;remove&quot; button, just before clearing the Dropify. You can access to all the Dropify object properties using __element.xxxx__. See how to use it.

```javascript
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.beforeClear', function(event, element){
    return confirm(&quot;Do you really want to delete \&quot;&quot; + element.filename + &quot;\&quot; ?&quot;);
});
```

* __dropify.afterClear:__  This event is called after the Dropify is clear. You can access to all the Dropify object properties using __element.xxxx__. See how to use it.

```javascript
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.afterClear', function(event, element){
    alert('File deleted');
});
```

* __dropify.errors:__  This event is called when there is one or more error during process. See how to use it.

```javascript
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.errors', function(event, element){
    alert('Has Errors!');
});
```

* __dropify.error.xxxxx:__  In addition to the event __dropify.errors:__, you can bind errors events one by one. See how to use it.

```javascript
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.error.fileSize', function(event, element){
    alert('Filesize error message!');
});
drEvent.on('dropify.error.minWidth', function(event, element){
    alert('Min width error message!');
});
drEvent.on('dropify.error.maxWidth', function(event, element){
    alert('Max width error message!');
});
drEvent.on('dropify.error.minHeight', function(event, element){
    alert('Min height error message!');
});
drEvent.on('dropify.error.maxHeight', function(event, element){
    alert('Max height error message!');
});
drEvent.on('dropify.error.imageFormat', function(event, element){
    alert('Image format error message!');
});
```
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdist%2Fassets%2Fnode_modules%2Fdropify'>Back to Directory</a>