File Input Drop Zone

A simple jQuery plugin that adds drag'n'drop support to a file input.

It applies to a container (div or whatever) that contains :

a file input (<input type='type' />)
optionnaly an img tag for image preview

That container is your drop zone. When you drop a file inside, it assigns it to the file input and, optionnaly if it's an image, displays an preview.

When you change the selected file via the input, the preview is uploaded too.

Features

No AJAX : No need for extra server-side code, whatever handled your regular file input will do the job
Supports old browsers : Your user can still use the input field in browsers that don't enable drag'n'drop
Very light : Less than 1kb for the minified js
No scripting required : Just include jQuery, file-input-drop-zone.js and add a file-input-drop-zone class to the div containing your input, and you're ready to go
No stylesheet needed : Style your zone and preview image however you want
Customizable : Disable preview or assign whatever preview zone/input field you want through options (see source)

Browser Support

Works fully with :

Chrome
IE10 ? (not tested yet but should work)

Works partly (no drag n drop but preview update is Ok) with :

Firefox - will work fully once files property is not readonly anymore, so please vote up the issue
Safari

Degrades gracefully (the file input still does its job) with :

IE9-

Demo

Clone this repo and play with the demo.html, or fork this jsFiddle.

About

A simple jQuery plugin to add drag'n'drop support to a file input. It synchronizes the field with the dropped items, does not use AJAX (no server-side script required) and can display a preview for image files.