Skip to main content

File chooser
Review

The file chooser component is used to allow users to open file dialog and choose one / several files to process them on browser's side.

This component can be used to select files and process them anyway in browser via change event. It only provides methods and properties without any visuals.

Examples #

Open in new window
<duet-layout center>
<div slot="main">
<duet-file-chooser id="file-chooser">
</duet-file-chooser>
<duet-button
id="open-button"
size="small"
variation="secondary"
fixed
icon="action-add-circle"
>

Open file chooser
</duet-button>
<div id="file-list"></div>
</div>
</duet-layout>


<script>
const fileChooser = document.querySelector("#file-chooser");
const openButton = document.querySelector("#open-button");

openButton.addEventListener("click", () => {
fileChooser.open()
});
</script>
Open in new window
<duet-layout center>
<div slot="main">
<duet-file-chooser accept=".pdf" id="file-chooser" multiple>
</duet-file-chooser>
<duet-button
id="open-button"
size="small"
variation="secondary"
fixed
icon="action-add-circle"
>

Open file chooser
</duet-button>
<div id="file-list"></div>
<duet-button variation="primary" id="submit-button">Upload</duet-button>
</div>
</duet-layout>

<script>
const fileChooser = document.querySelector("#file-chooser")
const submitButton = document.querySelector("#submit-button")
// store files in array to upload them
const addedFiles = []

const openButton = document.querySelector("#open-button");

openButton.addEventListener("click", () => {
fileChooser.open()
});

const addFile = (file) => {
const duetFile = document.createElement("p");
duetFile.innerText = file.name;
addedFiles.push(file)

const fileList = document.getElementById("file-list");
fileList.appendChild(duetFile);
}

//listener for handling file change in file chooser
fileChooser.addEventListener("duetChange", (event) => {
const files = event.detail.data.files;
console.log("! Selected files", event.detail.data.files);

for (let i = 0; i < files.length; i++) {
const file = files.item(i);
// This is how to access file mime type
console.log("! File MIME type", file.type);

addFile(files.item(i));
}
});

submitButton.addEventListener("click", () => {
console.log("Files to upload: ", addedFiles)
});

</script>

Properties #

Property Attribute Description Type Default
accept accept The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. string undefined
multiple multiple Use multiple to allow the user to select multiple files when uploading boolean false
theme theme theme. "" | "default" | "turva" ""

Events #

Event Description Type
duetChange Emitted when the value has changed. CustomEvent<{ originalEvent?: Event; data?: Record<string, any>; component: "duet-file-chooser"; }>

Methods #

getFiles() => Promise<FileList> #

Returns actually selected files in file chooser.

Returns #

Type: Promise<FileList>

open() => Promise<void> #

Opens file choose dialog.

Returns #

Type: Promise<void>



Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.