Select only folder - HTML

Question

How can I make a input[type="file"] select only folder, instead of files?

I used the dial:
<input type="file" multiple webkitdirectory>


But apparently, it selects the files from the folder. Displaying:

Answer 1

Solution

You can take the full path of a file and just remove the file name

Code

The code below is commented explaining its operation.

$('[type="file"]').on("change", function(event) {

  //Pega apenas um arquivo
  let file = event.target.files[0];
  
  //Pega o caminho do arquivo
  let caminho = file.webkitRelativePath;
  
  //Desmonta o caminho em um array
  let arrayPath = caminho.split('/');
  
  //Remove só o arquivo do caminho
  arrayPath.pop();
  
  //Controi o caminho denovo
  console.log(arrayPath.join('/'));
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="ctrl" webkitdirectory directory multiple/>

Helping

How to get Folder directory from HTML input type "file" or any other way?

HTMLInputElement.webkitdirectory

Important remark

If your project is a web application, although you can get the folder path, you can’t use it to manipulate in the future.

If you need these files, you will have to save to your server, and then manipulate, since your server will no longer have access to your user’s folder.