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?