How to Get Folder Directory from HTML Input Type "File" or Any Other Way

<script type="text/javascript">  function getfolder(e) {    var files = e.target.files;    var path = files[0].webkitRelativePath;    var Folder = path.split("/");    alert(Folder[0]);  }</script>
<input type="file" id="flup" onchange="getfolder(event)" webkitdirectory mozdirectory msdirectory odirectory directory multiple />

How to get full path of selected file on change of input type=‘file’ using javascript, jquery-ajax?

For security reasons browsers do not allow this, i.e. JavaScript in browser has no access to the File System, however using HTML5 File API, only Firefox provides a mozFullPath property, but if you try to get the value it returns an empty string:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

https://jsfiddle.net/SCK5A/

So don't waste your time.

edit: If you need the file's path for reading a file you can use the FileReader API instead. Here is a related question on SO: Preview an image before it is uploaded.

HTML multi-file input to get directory (Electon app)

The highest hierarchy you can get via this input and JavaScript is the top-most folder-name within the relative path – the one the user has chosen.

In your given example, this is assumed to be foo or bar.

⚠️ You will not get the absolute path (because this information is hidden, also for privacy/security reasons).

How to get path segments

Use string property webkitRelativePath and split-of the substring until first occurrence of path-separator /.

See also

• Get folder name on selection of folder from input field, already answered question
• MDN reference documentation webkitdirectory input with example

---

Related Topics