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>'
    }
}