Get new jQuery plugins just once a week



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




image upload



Override your input files with style.

Demo here :


jQuery is required to do the magic.


Clone the project in your workspace

$ git clone
$ cd dropify

Download packages

$ npm install

Compile assets

$ gulp build


# 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

$ npm install dropify

Bower Package

$ bower install dropify


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 :



<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" />
    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: {
        '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: {
        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>'


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!');

Related posts:

Fullscreen editor

To install using Bower
bower install dropify


jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas