Make a div button act like a input file button

Question

So I want to to have a div tht accts like button/input with type file that can allow me to upload files, but I don't know how to do that.

I saw some anwsers but they where using Jquery but I want plain JS.

Answer 1

Here's a ready-made solution that I found by typing your question into stack overflow's search bar..

function promptFile(contentType, multiple) {
  var input = document.createElement("input");
  input.type = "file";
  input.multiple = multiple;
  input.accept = contentType;
  return new Promise(function(resolve) {
    document.activeElement.onfocus = function() {
      document.activeElement.onfocus = null;
      setTimeout(resolve, 500);
    };
    input.onchange = function() {
      var files = Array.from(input.files);
      if (multiple)
        return resolve(files);
      resolve(files[0]);
    };
    input.click();
  });
}
function promptFilename() {
  promptFile().then(function(file) {
    document.querySelector("span").innerText = file && file.name || "no file selected";
  });
}

<button onclick="promptFilename()">Open</button>
<span></span>

Reference link: How to open select file dialog via js?