Friday, November 1, 2013

jQuery Ajax File uploader with progress bar and drag and drop

Normally when i start one of those projects(own) that i always end up leaving behind due to unknown reasons.... some things in the middle may turn interesting.
Well this little JavaScript project is one of those things that took over the initial thing for the past few days.

Basically is a jQuery plugin for Ajax file uploading, including drag & drop and some upload progress bar action. Some of the stuff i found online didn't had all this features and/or mess up A LOT with markup making customization even harder than doing the whole thing from scratch.
The plugin provides a series of callbacks for pretty much everything so the developer can fully customize the UI from there.
Look at the online demos to get a better feeling of it:
  1. http://danielm.herokuapp.com/demos/dnd/  (good lookng BootstrapCSS theme'd).
  2. http://danielm.herokuapp.com/demos/dnd/simple.php (plain HTML/CSS)
Update: Added another demo where I explain how to add a Image Preview during the upload proccess. Check it out: http://blog.daniel.com.uy/2014/04/images-preview-with-my-jquery-upload-plugin.html

Testing is NEEDED!, but it should work on the latest(and not that recent) versions of Chrome/Firefox/Safari and IE10. For the rest a fallback mode(callback) is provided and the developer can do wherever they want from there.

Check the Project Page and Source Code. And feel free to contact me via email or using the Github Issues tracker, for any comments or suggestions on it.