puter.ui.showOpenFilePicker()
Websites Puter Apps Node.js Workers
Presents the user with a file picker dialog allowing them to pick a file from their Puter cloud storage.
Syntax
puter.ui.showOpenFilePicker()
puter.ui.showOpenFilePicker(options)
Parameters
options (optional)
A set of key/value pairs that configure the file picker dialog.
| Option | Type | Description |
|---|---|---|
accept |
String |
The list of MIME types or file extensions that are accepted by the file picker. Defaults to */*. For example, image/* allows the user to select any image file, and ['.jpg', '.png'] allows files with .jpg or .png extensions. |
multiple |
Boolean |
If set to true, the user can select multiple files. Defaults to false. |
path |
String |
The initial directory to open the file picker in. Defaults to the user's Desktop. The special prefix %appdata% resolves to your app's private appdata directory (for example, %appdata%/saves opens that subdirectory inside your appdata). |
Return value
A Promise that resolves to either one FSItem or an array of FSItem objects, depending on how many files 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 file = await puter.ui.showOpenFilePicker().undefinedOnCancel;
if (file === undefined) {
// the user closed the picker without choosing a file
}
Examples
Show the contents of a picked file
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<h1 id="file-name"></h1>
<button id="open-file-picker">Open file picker</button>
<pre><code id="file-content"></code></pre>
<script>
document.getElementById('open-file-picker').addEventListener('click', ()=>{
puter.ui.showOpenFilePicker().then(async (file)=>{
// print file name
document.getElementById('file-name').innerHTML = file.name;
// print file content
document.getElementById('file-content').innerText = await (await file.read()).text();
});
});
</script>
</body>
</html>