EN
JavaScript - directory selection window
12 points
In this short article, we would like to show how to open dialog that lets to choice directory using HTML and JavaScript.
Quick solution:
xxxxxxxxxx1
<input type="file" directory="true" webkitdirectory="true" />Simple preview:
The time when directory selection dialog API was introduced in the some web browsers is wide. It is since 2010 in Google Chrome, around 2013 in Opera, around 2016 in Firefox, up to 2018 in Apple Safari.
Warning: some web browsers may ask user to confirm directory selection by clicking to the additionaly displayed dialog.
Source code:
xxxxxxxxxx1
2
<html>3
<body>4
<input type="file" directory="true" webkitdirectory="true" onchange="handleChange(this)" />5
<script>6
7
function getPath(file) {8
return file.relativePath || file.webkitRelativePath;9
}10
11
function handleChange(input) {12
var files = input.files;13
console.clear();14
for (var i = 0; i < files.length; ++i) {15
var file = files[i];16
var path = getPath(file);17
console.log('name: ' + file.name + '\ntype: ' + file.type + '\npath: ' + path + '\n\n');18
}19
}20
21
</script>22
</body>23
</html>
