Drag and drop files into the HTML file input box.

Problem

We may now drag and drop files into a specific container and use XHR 2 to upload them. At the same time, there are a lot of them. With real-time progress bars and other features. It’s all quite cool. Here’s an example.

However, there are occasions when we don’t require as much coolness. I’d like to be able to drag and drop many files into a regular HTML file input: input type=file multiple>.

Is that something you can do? Is there a way to have the file input ‘fill’ with the correct filenames (?) from the file drop? (For file system security concerns, full filepaths aren’t available.)

Why? Because I’d prefer to fill out a standard form. For all browsers and all devices. The drag & drop is just progressive enhancement to enhance & simplify UX. The standard form with standard file input (+ multiple attribute) will be there. I’d like to add the HTML5 enhancement.

edit I know that with some browsers, you can drag and drop files directly into the file input. I know Chrome normally accomplishes this, but it occasionally fails and loads the file in the current page (which is a big no-no if you’re filling out a form). I’d like to make it fool- and browser-proof.

Asked by Rudie

Solution #1

The following works in Chrome and Firefox, but I haven’t yet found a solution that also works with IE10+:

To register your evt handlers, you’ll probably want to use addEventListener or jQuery (or something similar) – this is simply for brevity’s sake.

Answered by jlb

Solution #2

For this, I devised a solution.

This method’s Drag and Drop feature is only available in Chrome, Firefox, and Safari. (I’m not sure if it works with IE10), but the “Or click here” button works great in other browsers.

When you drag a file over an area, the input field simply follows your mouse, and I’ve also added a button.

Remove the opacity:0 comment to make the file input visible so you can see what’s going on.

Answered by BjarkeCK

Solution #3

This is the HTML5 “DTHML” way of doing it. Input in the standard format (which IS read only as Ricardo Tomasi pointed out). If you drag a file into the form, it will be associated to it. This WILL necessitate a change to the action page in order for the file to be accepted in this manner.

It’s even better if you can make the entire window a drop zone, as seen here. How can I detect an HTML5 drag event entering and exiting the window in the same way as Gmail does?

Answered by William Entriken

Solution #4

For a non-JavaScript option, see:

<div class="file-area">
    <input type="file">
    <div class="file-dummy">
        <span class="default">Click to select a file, or drag it here</span>
        <span class="success">Great, your file is selected</span>
    </div>
</div>

<style>
    .file-area {
        width: 100%;
        position: relative;
        font-size: 18px;
    }
    .file-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }
    .file-area .file-dummy {
        width: 100%;
        padding: 50px 30px;
        border: 2px dashed #ccc;
        background-color: #fff;
        text-align: center;
        transition: background 0.3s ease-in-out;
    }
    .file-area .file-dummy .success {
        display: none;
    }
    .file-area:hover .file-dummy {
        border: 2px dashed #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy {
        border-color: #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy .success {
        display: inline-block;
    }
    .file-area input[type=file]:valid + .file-dummy .default {
        display: none;
    }
</style>

Adapted from https://codepen.io/Scribblerockerz/pen/qdWzJw

Answered by Jonathan

Solution #5

Answered by Dipak

Post is based on https://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input