HTML form input type file preselect value with javascript

Question

This is a self answered question to give an answer to all those, who find this and still dont have an answer (I couldn't find one). Preselecting files is possible (at least with images). It's probably bad practive but it is possible.

score 0 · Accepted Answer · answered Nov 14 '20 at 00:31

Here's the solution: (works in Firefox 82.0.3 and latest Chrome [11-2020])
HTML:

<input id="my-input" type="file">

JavaScript:

const input = document.getElementById("my-input");  // your input element type="file"
const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png"
// a url with a resource
const dt = new DataTransfer();  // create virtual DataTransfer object
const request = new XMLHttpRequest();   // create the HTTP request
request.open("GET", url, true);
request.responseType = "arraybuffer";
// with images this works. For other types you'll find an answer yourself eventually :)
const fileType = (url.substr(url.lastIndexOf(".") + 1));
const mimeType =  ("image/" + fileType).replace("jpg", "jpeg"); // there is no MIME type image/jpg only image/jpeg
request.overrideMimeType(mimeType); // idk if this is necessary but it works
request.onload = function (e) {
            const blob = new Blob([this.response], {type: mimeType});   // create Blob object from response
            const file = new File([blob], "your filename")      // create File object from Blob
            dt.items.add(file);     // add file to virtual DataTransfer
            input.files = dt.files;     // place input content with new content
}
request.send(); // execute request

const myImage = document.getElementById("my-selected-image");
const input = document.getElementById("my-input"); // your input element type="file"
const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png" // a url with a resource
window.onload = function() { // on document load
  const dt = new DataTransfer(); // create virtual DataTransfer object
  const request = new XMLHttpRequest(); // create the HTTP request
  request.open("GET", url, true);
  request.responseType = "arraybuffer";
  // with images this works. For other types you'll find an answer yourself eventually :)
  const fileType = (url.substr(url.lastIndexOf(".") + 1));
  const mimeType = ("image/" + fileType).replace("jpg", "jpeg"); // there is no MIME type image/jpg only image/jpeg
  request.overrideMimeType(mimeType); // idk if this is necessary but it works
  request.onload = function(e) {
    const blob = new Blob([this.response], {
      type: mimeType
    }); // create Blob object from response
    const file = new File([blob], "your filename." + fileType, {
      type: mimeType
    }) // create File object from Blob
    dt.items.add(file); // add file to virtual DataTransfer
    input.files = dt.files; // place input content with new content
    input.dispatchEvent(new Event("change"));
  }
  request.send(); // execute request
}

// only if you want to display the file
input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.onload = function(e) {
    myImage.src = e.target.result;
    myImage.removeAttribute("hidden");
  };
  reader.readAsDataURL(input.files[0]);
})

<input id="my-input" type="file">
<img src="" id="my-selected-image" hidden>

HTML form input type file preselect value with javascript

1 Answers1