Html 5 drag and drop to input file

Question

I have no idea if this is possible, I can't seem to find anything.

What I want is to offer the user the option of either "drag drop" an image or use the normal html file input box.

I don't the image to be uploaded until the form is saved. So I guess the drag and drop area would just update the field?

How would I go about doing that?

Thanks in advance.

Answer 1

I came here looking for the same answer. Ended up do the following, which looks to fit your need.

Make a div for your image drop box, then add your input type="file" inside the div. Set height and width as desired. Set opacity to 0. Now your input fills the div, can't be seen, but still functions.

<div class="divClass">
  <input class="inputClass" name="inputName" type="file">
</div>

Styles below

<Style>
.divClass{
  position: relative;
  // anything else
}
.inputClass{
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  height: x // as desired
  width: x // as desired
}
</style>

=== Edit ===

Ignore my styling up there, you really just need to use a form with an input type=file. Style/layout as needed.

As pointed out, by Shazoo, drag and drop of image does not work in IE. Works with Firefox and Chrome. Unsure of Opera and Safari. You cannot use JavaScript on the input type=file for security reasons -- it is read only as Jasny said, so you have to rely on what the browser vendor allows.

With that in mind, you can just give the IE user the option of clicking the field to select and upload a file. The default input type="file" in IE offers this ability, so as long as you leave the input visible, they should see it. (Default Edge input type=file)

Filter for IE example (based on https://stackoverflow.com/a/31757969/3136874)

function stopIeDefault(){
  window.addEventListener("dragover",function(e){
    e = e || event;
    e.preventDefault();
  },false);
    window.addEventListener("drop",function(e){
    e = e || event;
    e.preventDefault();
  },false);
}
if (/MSIE 10/i.test(navigator.userAgent)) {
  // This is internet explorer 10
  stopIeDefault()
}

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
  // This is internet explorer 9 or 11
  stopIeDefault()
}

if (/Edge\/\d./i.test(navigator.userAgent)){
  // This is Microsoft Edge
  stopIeDefault()
}   

This tests for IE and edge. If it detects a version then it will use stopIeDefault to preventDefault for drag and drop. This keeps IE from loading the image if someone drags and drops it on the form. (Edge appears to prevent this by default, so you may not need to call stopIeDefault as I have.) Additionally, you could apply a different style or add blocks of code or what not to deal with IE. According to w3schools, IE browser share is 5.2-6.2% as of August 2016: http://www.w3schools.com/browsers/default.asp, if that helps you decide what to do.

If anyone can confirm if drag and drop works on safari or opera, please do. === Edit ===

Answer 2

No it can't be done. Dropped files can only be uploaded through AJAX.

The only way to upload a file in a normal HTML form is through <input type="file"> and file inputs are read-only.