https://www.jqueryscript.net/form/jQuery-Plugin-To-Beautify-File-Inputs-with-Custom-Styles-Dropify.html

Override your input files with style.

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

jQuery is required to do the magic.

Clone the project in your workspace

$ git clone [email protected]:JeremyFagis/dropify.git
$ 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

www.npmjs.com/package/dropify

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

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

• 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).

<input type="file" class="dropify" data-default-file="url_of_your_file" />

• 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.

<input type="file" class="dropify" data-height="300" />

• 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.

<input type="file" class="dropify" data-max-file-size="3M" />

• disabled: You can disable the input if you add the attr disabled="disabled".

<input type="file" class="dropify" disabled="disabled" />

• disableRemove: You can disable the remove button if you add the attr data-disable-remove="true".

<input type="file" class="dropify" data-disable-remove="true" />

• 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.

$('.dropify').dropify({
    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'

    }
}

• tpl: You can update default template. You juste have to add an options array when you init the plugin.

$('.dropify').dropify({
    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>'
    }
}

• 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.

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.

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

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

"# dropify-image-uploader"