Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JeremyFagis/dropify
Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify
https://github.com/JeremyFagis/dropify
Last synced: 14 days ago
JSON representation
Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify
- Host: GitHub
- URL: https://github.com/JeremyFagis/dropify
- Owner: JeremyFagis
- License: mit
- Archived: true
- Created: 2015-02-26T10:51:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-09-23T10:41:21.000Z (about 4 years ago)
- Last Synced: 2024-05-15T20:52:13.967Z (6 months ago)
- Language: SCSS
- Homepage:
- Size: 1.58 MB
- Stars: 976
- Watchers: 46
- Forks: 403
- Open Issues: 85
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚠️ Repository archived ⚠️
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 [email protected]: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 & 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)
$ npm install dropify
## Bower Package
$ bower install 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 just 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="url_of_your_file"__ on you DOM element (it's recommended).
```html
```
* __height:__ Set the height of your dropify element. For exemple you want 300px height, you have to add the attribute __data-height="300"__ on your DOM element.
```html
```
* __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
```
* __minWidth:__ Set the min width allowed. An error will be display if the width is smaller than the option.
```html
```
* __maxWidth:__ Set the max width allowed. An error will be display if the width is bigger than the option.
```html
```
* __minHeight:__ Set the min height allowed. An error will be display if the height is smaller than the option.
```html
```
* __maxHeight:__ Set the max height allowed. An error will be display if the height is bigger than the option.
```html
```
* __disabled:__ You can disable the input if you add the attr __disabled="disabled"__.
```html
```
* __showRemove:__ You can hide the remove button if you add the attr __data-show-remove="false"__. Default: true.
```html
```
* __showLoader:__ You can hide the loader if you add the attr __data-show-loader="false"__. Default: true.
```html
```
* __showErrors:__ You can hide errors if you add the attr __data-show-loader="false"__. Default: true.
```html
```
* __errorsPosition:__ You can choose where you want to display the errors, overlay or outside. Default: overlay.
```html
```
* __allowedFormats:__ You can allow/deny pictures formats. If you add the attr __data-allowed-formats="portrait square"__ only portrait and square picture will be allowed. Default: ['portrait', 'square', 'landscape'].
```html
```
* __allowedFileExtensions:__ You can allow only some file extensions. If you add the attr __data-allowed-file-extensions="pdf png psd"__ only PDF, PNG and PSD files will be allowed. By default, everything is allowed. Default: ['*'].
```html
```
* __maxFileSizePreview:__ Set the max filesize of the previewed document (if it's an image). If the file size is bigger than the option, it will be only the file icon and disabled the preview. You can use unit like K, M and G.
```html
```
* __messages:__ You can translate default messages. You just 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 happended.'
}
});
```
* __error:__ You can translate default errors messages. You just 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 just have to add an options array when you init the plugin.
```javascript
$('.dropify').dropify({
tpl: {
wrap: '
',
loader: '',
message: '',
preview: '
',
filename: '
',
clearButton: '{{ remove }}',
errorLine: '{{ error }}
',
errorsContainer: '
'
}
});
```
## Events
* __dropify.beforeClear:__ This event is called when you click on the "remove" 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("Do you really want to delete \"" + element.filename + "\" ?");
});
```
* __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!');
});
```