jQuery Plugin To Beautify File Inputs with Custom Styles - Dropify

Dropify is a jQuery plugin to create a beautiful file uploader that converts a standard input type="file" into a nice drag & drop zone with previews and custom styles.

How to use it:

1. Load the required stylesheet dropify.min.css in the head section of the web page.

<link rel="stylesheet" href="/path/to/dropify.min.css">

2. Insert a normal file input into your web page.

<input type="file" id="demo" class="dropify">

3. Initialize the plugin by calling the dropify() method to create a drag and drop file input zone with default styles & settings.

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

4. There are several options which can be passed to dropify() as an object. You can also pass the options via data-option attributes directly on your file input, as in data-default-file="1.jpg".

// default file for the file input
defaultFile: '',

// max file size allowed
maxFileSize: 0,

// custom messages
messages: {
    'default': 'Drag and drop a file here or click',
    'replace': 'Drag and drop or click to replace',
    'remove':  'Remove',
    'error':   'Sorry, this file is too large'
},

// custom template
tpl: {
    wrap:        '<div class="dropify-wrapper"></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>',
    error:       '<p class="dropify-error">{{ error }}</p>'
}

5. Events.

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

// called when you click on the "remove" button
drEvent.on('dropify.beforeClear', function(event, element){
  // do something
});

// called after the Dropify is clear
drEvent.on('dropify.afterClear', function(event, element){
  // do something
});

Changelog:

2019-09-24

• v0.2.2: fixed the selector ".dropify-font-empty" was not found

---

This awesome jQuery plugin is developed by JeremyFagis. For more Advanced Usages, please check the demo page or visit the official website.