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:
Notice how the button becomes highlighted. So - quick show of hands - how many of you knew your browser supported this?
Archived Comments
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.
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?
I had no idea! Discoverability of this hidden feature will continue to be poor unless we restyle the file input.
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.
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.
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.
I had no idea, but definitely gonna keep this in mind. Thanks for the info.
Yep, I knew it. Then again, I make an app that handles files in-browser specifically.