Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Accept Matched on the extension as well as the media type, because Windows reports .csv as an Excel file.

Max Size Written how you would say it.

Max Files

Thumbnails

Paste Paste a screenshot straight into the page.

Folders Drop a whole folder and keep the paths.

Duplicates Off turns away a file already in the list.

import { createFileUploader } from '@devix-labs/file-uploader';
import '@devix-labs/file-uploader/styles.css';

createFileUploader(document.querySelector('#target'), {
  autoUpload: false,
  accept: 'image/*,.pdf',
  maxSize: '2 MB',
  maxFiles: 5,
  thumbnails: true,
  paste: true,
  folders: true,
  duplicates: true
});

import { FileUploader } from '@devix-labs/file-uploader/react';
import '@devix-labs/file-uploader/styles.css';

<FileUploader
  accept="image/*,.pdf"
  maxSize="2 MB"
  maxFiles={5}
  thumbnails
  paste
  folders
  duplicates
/>

<script setup>
import { FileUploader } from '@devix-labs/file-uploader/vue';
import '@devix-labs/file-uploader/styles.css';
</script>

<template>
  <FileUploader
  accept="image/*,.pdf"
  max-size="2 MB"
  :max-files="5"
  thumbnails
  paste
  folders
  duplicates
/>
</template>

<script>
  import { fileUploader } from '@devix-labs/file-uploader/svelte';
  import '@devix-labs/file-uploader/styles.css';
</script>

<div use:fileUploader={{
  autoUpload: false,
  accept: 'image/*,.pdf',
  maxSize: '2 MB',
  maxFiles: 5,
  thumbnails: true,
  paste: true,
  folders: true,
  duplicates: true
}} />

Every option here is in the documentation, along with the ones that are not worth a control.