cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A quick picture dropzone with HTML5 drag & drop API and standard input type file.


  1. I added an e.preventDefault() call in the drop handler. Chrome, at least, would open up the image in a blank window.


  2. Thanks for the feedback Jason.

    I did remove my e.preventDefault() because the input file doesn't seem to change on drop. Set the input opacity to 1 and try to drop a file. The input value doesn't change. It must be a solution but I didn't find it yet :)

  3. Is there a way I can set this up for multiple uploads? I added the multiple attribute to the input form, but am not sure what to do on the js side to provide the preview. thanks!

  4. Hey Jay,

    This is awesome. However, I cannot get it to work on my end. Would you be willing to help diagnose the issue? Everything looks good except when I drap and drop a .png file into the drop zone...nothing happens....I also can slick on the dropzone to manually upload the .png file but still no preview. I haven't incorporated any server-side code so I am working only with the code that you have provided at this point.

    Thank you, Nick

  5. Hello, I created a jQuery plugin from this code a while ago. https://github.com/jaysalvat/ezdz

    I hope it will help you.


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.