Get help Color blind mode Low vision mode

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.

Integration guidelines

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.