Subjects and events
puter.ui.showDirectoryPicker()
Websites Puter Apps Node.js Workers
Presents the user with a directory picker dialog allowing them to pick a directory from their Puter cloud storage.
Syntax
puter.ui.showDirectoryPicker()
puter.ui.showDirectoryPicker(options)
Parameters
options (optional)
A set of key/value pairs that configure the directory picker dialog.
multiple(Boolean): if set totrue, user will be able to select multiple directories. Default isfalse.
Return value
A Promise that resolves to either one FSItem or an array of FSItem objects, depending on how many directories were selected by the user. If the user cancels, the promise stays pending.
The returned promise also has an undefinedOnCancel property. It holds a second promise that resolves to the same result, or to undefined if the user cancels:
const directory = await puter.ui.showDirectoryPicker().undefinedOnCancel;
if (directory === undefined) {
// the user closed the picker without choosing a directory
}
Examples
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<button id="open-directory">Open directory</button>
<h1 id="directory-name"></h1>
<pre><code id="directory-content"></code></pre>
<script>
document.getElementById('open-directory').addEventListener('click', ()=>{
puter.ui.showDirectoryPicker().then(async (directory)=>{
// print directory name
document.getElementById('directory-name').innerHTML = directory.name;
// print directory content
const children = await directory.readdir();
if(children.length){
let content = '';
for(let child of children){
content += child.name + '\n';
}
document.getElementById('directory-content').innerText = content;
}else{
document.getElementById('directory-content').innerText = 'Empty directory';
}
});
});
</script>
</body>
</html>