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.
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?