CODEWITHSUNDEEP
javascripthtml
nubela
nubela

Reputation: 17284

How do I convert a file object to a populated file input so I can submit via form?

So I have a file object that I have gotten from drag and drop from desktop. I am trying to populate a hidden file input of which I can perform submission with it. How can I do this?

Thanks!

Upvotes: 1

Views: 563

Answers (2)

ebidel
ebidel

Reputation: 24109

There are a couple of ways. You don't necessarily need a hidden file input.

  1. Use xhr.send(file): http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob
  2. Use xhr.send(formData): http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata

  3. Actually use a hidden <input type="file">:

    <style>
#files {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.0;
  z-index: 2;
}
[type='submit']{
  display: none;
}
#drop {
  position: relative;
  margin: auto;
  width: 500px;
  height: 300px;
}
</style>

<form action="/upload" method="POST" enctype="multipart/form-data"> 
  <div id="drop"> 
    <div>Drop files here</div> 
    <input id="files" type="file" name="file" multiple> 
  </div> 
  <input type="submit"> 
</form> 

<script>
document.querySelector("#files").addEventListener("change", function(e) {
  document.querySelector("[type='submit']").click();
}, false);
</script>

The key to the last one is the opacity: 0;height: 100%;width: 100% on the file input.

Upvotes: 1

James
James

Reputation: 111880

Found this:

(File API) Using the FileReader.readAsDataURL(file) call, every time a file is completely read, a new “data URL” (RFC 2397) formatted object is created and an event wrapping it is fired to the onloadend handler on the FileReader object.

(FYI: The “data URL” object is Base64-encoded binary data, with a spec-defined header sequence of chars. Browsers understand them.)

(File API) Now that we have the “data URL” object from the event, we can do cool things with it like replace the src attribute of an tag to immediately show the value on-screen OR upload the Base64-encoded portion of the data to a server to process as binary data.

Source

Upvotes: 0

Related Questions