Drag and Drop on File Inputs in HTML

A big thank you to Sara Soueidan for sharing this on Twitter. I've worked with a few web apps that allow for drag and drop file uploads and when it works well, it is really handy. In fact, being able to drag and drop an image onto my Wordpress editor is one of the things I'm most happy about since my migration. But did you know that you can drag and drop a file onto a regular HTML input file field?

As Sara discovered, and I verified, you absolutely can. It works in Chrome, Firefox, and Safari. I confirmed it myself in Chrome and Firefox. I tested IE11 and - unfortunately - it doesn't work. Both Chrome and Firefox will also support dragging multiple files if you include the multiple attribute in the input field.

As I said, I didn't test Safari, but Chrome also provides UI feedback during the drag that makes this feature a bit more obvious:

chrome2

Notice how the button becomes highlighted. So - quick show of hands - how many of you knew your browser supported this?

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.