00 Votes

HTML5: Get Folder Name from File Input

Question by Guest | 2016-09-22 at 16:34

I have read the tutorial how to implement an HTML 5 file input with directory selection.

Now, I wonder whether there is any possibility available to determine the name of the selected folder. Using the property "name", only the filename without folder is accessible.

Does someone know any way.

ReplyPositiveNegative
0Best Answer2 Votes

Yes, you can use the property .webkitRelativePath for that.

I have added this information to the example from the tutorial, you have mentioned:

for (var i = 0; i < e.target.files.length; i++) {
  var s = e.target.files[i].name + '\n';  
  s += e.target.files[i].size + ' Bytes\n';
  s += e.target.files[i].type + '\n';
  s += e.target.files[i].webkitRelativePath;
  alert(s);
}

With e.target.files[i].webkitRelativePath the file together with its folder will be displayed.

If you should only be interested in the folder itself, you can use the following code:

var relpath = e.target.files[i].webkitRelativePath;
var folder = relpath.split("/");
alert(folder[0]);

Here, first, we are storing the relative path to the variable relpath. After that, we are using .split() for getting the folder name and cutting off the filename. While the relative path could be something like "folder/file.dat", for example, with this, we are only getting "folder".
2016-09-22 at 22:47

ReplyPositive Negative
Reply

Related Topics

Rename File to its Folder Name

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.