Drag and Drop on File Inputs in HTML

This post is more than 2 years old.

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?

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Marcos S posted on 1/22/2015 at 11:18 AM

Thing is, unless you get to style file inputs better, this will be of little use in many real situations, where developers have to do some actual customizing on the inputs.

Comment 2 (In reply to #1) by Raymond Camden posted on 1/22/2015 at 11:21 AM

Why would it be of no use? You can style file inputs a bit at least. What exactly are you trying to do where you would replace a file input with something else entirely?

Comment 3 by Chris Geirman posted on 1/22/2015 at 3:31 PM

I had no idea! Discoverability of this hidden feature will continue to be poor unless we restyle the file input.

Comment 4 (In reply to #2) by Chris Geirman posted on 1/22/2015 at 3:32 PM

I'm interpreting Marcos to mean that this will be used very little unless the input is better styled so that it's obvious it supports drag & drop behavior.

Comment 5 (In reply to #3) by Raymond Camden posted on 1/22/2015 at 3:35 PM

I half way agree with you. I'm not sure we need styling to let people know. You could just add a bit of text right next to it. Of course, knowing when you would need to include the text is another matter.

Comment 6 (In reply to #5) by Chris Geirman posted on 1/22/2015 at 3:55 PM

You may be able to solve the problem with neighboring text, assuming they notice it. But I think that's a fairly big assumption. I'd argue that most people will focus on the control itself, so the better the control visually convey's expected functionality the better.

Comment 7 by Mike posted on 1/23/2015 at 12:36 PM

I had no idea, but definitely gonna keep this in mind. Thanks for the info.

Comment 8 by xahdica posted on 1/23/2015 at 3:06 PM

Yep, I knew it. Then again, I make an app that handles files in-browser specifically.