How just select directory not file?

Question

I using js to create my form, my problem is how to just select directory, not file?

Belows is my coding:

const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value;
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});

<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>

Below is my output:

Actually I want the output not to select the file, just select the folder, because the next step I need store file in this folder directory.

If success the output is folder directory name is:

C:\Staff Import Folder\Source

Hope someone can help me solve this problem. Thanks.

Does this answer your question? [html5/Javascript - How to get the Selected folder name?](https://stackoverflow.com/questions/24718769/html5-javascript-how-to-get-the-selected-folder-name) — Not A Bot, Mar 05 '20 at 05:17
This might help you https://stackoverflow.com/questions/2809688/directory-chooser-in-html-page — Not A Bot, Mar 05 '20 at 05:17

score 2 · Answer 1 · answered Mar 05 '20 at 05:39

In newest browsers, you can select a directory content with the webkitdirectory attribute of the <input type="file"> element, as being defined by Files and Directories entries API, but I fear this will be deceptive to you since it will only select all the files in this directory (and its sub-folders). There is currently no way to navigate this directory from here.

We should be able to navigate such directory, by looking at the webkitEntries IDL attribute, but currently browsers only populate this from a drop event. You can see a demo in this Q.A.

inp.onchange = (e) => {
  console.log( inp.webkitEntries ); // []
  console.log( [...inp.files].map( file => file.name ) );
};

<input type="file" webkitdirectory id="inp">

But even then, while you'll be able to navigate that directory, you still won't be able to set anything on the FileSystem. Web scripts simply don't have the authorization to write anything on the disk, except in sand-boxed areas like IndexedDB.

score 0 · Answer 2 · answered Mar 05 '20 at 05:18

0

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listing");
  let files = event.target.files;

  for (let i = 0; i < files.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = files[i].webkitRelativePath;
    output.appendChild(item);
  };
}, false);

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

answered Mar 05 '20 at 05:18

Abdelrahman Gobarah

1,544
2
12
29

``webkitdirectory`` is still not standardized, it will not work in many browsers. – Not A Bot Mar 05 '20 at 05:29
and it only retrieves directory content. – Kaiido Mar 05 '20 at 05:33

How just select directory not file?

2 Answers2