Multi-file

A component for uploading multiple files with a progress list, retry and a running total.

Click to upload or drag and drop

up to 1 MB each · 10 max

Each file shows its type, size and progress. Failed uploads show the error with a retry button, and running uploads can be canceled.

Installation

Use the shadcn CLI to add the component to your project.

npx shadcn@latest add https://edgestore.dev/r/file-uploader.json

Usage

Install or copy the component from Installation before using this example.

'use client';

import { FileUploader } from '@/components/upload/multi-file';
import {
  UploaderProvider,
  type UploadFn,
} from '@/components/upload/uploader-provider';
import { useEdgeStore } from '@/lib/edgestore';
import * as React from 'react';

export function MultiFileDropzoneUsage() {
  const { edgestore } = useEdgeStore();

  const uploadFn: UploadFn = React.useCallback(
    async ({ file, onProgressChange, signal }) => {
      const res = await edgestore.publicFiles.upload({
        file,
        signal,
        onProgressChange,
      });
      // you can run some server action or api here
      // to add the necessary data to your database
      console.log(res);
      return res;
    },
    [edgestore],
  );

  return (
    <UploaderProvider uploadFn={uploadFn} autoUpload>
      <FileUploader
        maxFiles={5}
        maxSize={1024 * 1024 * 1} // 1 MB
        accept={{
          'application/pdf': ['.pdf'],
          'text/plain': ['.txt'],
        }}
        typesLabel="PDF or TXT"
      />
    </UploaderProvider>
  );
}

Props

Prop	Type	Default	Description
`maxFiles`	`number`		Maximum number of files in total.
`maxSize`	`number`		Maximum file size in bytes.
`accept`	`Accept`	all types	Accepted file types, in react-dropzone's format.
`typesLabel`	`string`		Human-readable list of accepted types, shown in the hint and in error messages.
`disabled`	`boolean`	`false`	Disables the component.
`dropzoneClassName`	`string`		Additional className for the dropzone.
`fileListClassName`	`string`		Additional className for the file list.

Building your own layout

FileUploader is a Dropzone and a FileList, so you can arrange the two differently.

Multi-file

Installation

Usage

Props

Building your own layout

On this page