File Upload

Live Editor

function FileUploadDemo() {
  return (
    <ThemeProvider>
      <Dropzone
        label="Drop assets"
        dropLabel="Drop files here"
        accept="image/*"
        multiple
        showPreviews
        onChange={(files) => console.log(files)}
        onUploadRequest={async ({ file, setProgress }) => {
          setProgress(100);
          return { name: file.name };
        }}
      />
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

name, label, description, accept, multiple, disabled, required, maxFiles, maxSize, buttonText, dropLabel, showPreviews, progress, uploadOnSelect, uploadButtonText, onUploadRequest, onChange, onReject, onUploadStart, onUploadProgress, onUploadSuccess, onUploadError, onUploadCancel, onUploadComplete