Get new jQuery plugins just once a week

×

dropify

October 5, 2015

Dropify | A jQuery plugin for a beautiful image upload UI.

Dropify is a simple jQuery plugin to replace the default file chooser by a beautiful image upload UI.

Created by Jeremy FAGIS

Download

Example

Dropify

image upload

Dropify

Dropify

Override your input files with style.

Demo here : http://jeremyfagis.github.io/dropify

Dependency

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 & 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

$ npm install dropify

Bower Package

$ bower install dropify

Usage

You have to include dist/js/dropify.js, dist/css/dropify.css and dist/fonts/* to your project, then you just have to init the jQuery plugin like that :

$('.dropify').dropify();

Options

<input type="file" class="dropify" data-default-file="url_of_your_file" />
<input type="file" class="dropify" data-height="300" />
<input type="file" class="dropify" data-max-file-size="3M" />
<input type="file" class="dropify" data-min-width="400" />
<input type="file" class="dropify" data-max-width="1000" />
<input type="file" class="dropify" data-min-height="400" />
<input type="file" class="dropify" data-max-height="1000" />
<input type="file" class="dropify" disabled="disabled" />
<input type="file" class="dropify" data-show-remove="false" />
<input type="file" class="dropify" data-show-loader="false" />
<input type="file" class="dropify" data-show-errors="true" />
<input type="file" class="dropify" data-errors-position="outside" />
<input type="file" class="dropify" data-allowed-formats="portrait square" />
<input type="file" class="dropify" data-allowed-file-extensions="pdf png psd" />
<input type="file" class="dropify" data-max-file-size-preview="3M" />
$('.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.'
    }
});
$('.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).'
    }
});
$('.dropify').dropify({
    tpl: {
        wrap:            '<div class="dropify-wrapper"></div>',
        loader:          '<div class="dropify-loader"></div>',
        message:         '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
        preview:         '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
        filename:        '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
        clearButton:     '<button type="button" class="dropify-clear">{{ remove }}</button>',
        errorLine:       '<p class="dropify-error">{{ error }}</p>',
        errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
    }
});

Events

var drEvent = $('.dropify').dropify();

drEvent.on('dropify.beforeClear', function(event, element){
    return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.afterClear', function(event, element){
    alert('File deleted');
});
var drEvent = $('.dropify').dropify();

drEvent.on('dropify.errors', function(event, element){
    alert('Has Errors!');
});
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!');
});
dropify

Related posts:

FileDrop
At-js
Uniform-js

To install using Bower
bower install dropify

Dropify

http://jquer.in/wp-content/uploads/2015/10/Dropify.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever