FileDropzoneInputBody

This component uses useFileDropzoneContext to provide the default body for SingleFileUpload, it can also be used for MultiFileUpload.

note

You can use this component to customize labels used in MultiFilepload or SingleFileUpload.

Usage

Click to upload or Custom Title

import { useXMLHttpService, SingleFileUpload, FileDropzoneInputBody } from 'mui-file-upload';

export const Component = () => {
  const uploadService = useXMLHttpService(...);
  return <SingleFileUpload
    uploadService={uploadService}
    body={
      <FileDropzoneInputBody
        title='or Custom Title'
        openFileSelectorTitle='Custom Click to Upload'
        dropTitle='or Custom Drop Title'
        disabledTitle='Custom Disabled Title'
        dragRejectedTitle='Custom Rejected Title'
        fileOverloadTitle='Custom Too Many Files'
      />
    }
  />
}

Optional Props

title ^ReactNode

The default title of the zone

Default: "Drag the file here to start uploading" | "Drag the files here to start uploading"
_{The pluralization is based on if used FileDropzone allowsMultiple is set to true.}

openFileSelectorTitle ^ReactNode

The title of the button that will open the file selector dialog

Default: "Click to upload" | "Browse files"

dropTitle ^ReactNode

The title of the zone that will be displayed when something can be dropped on it

Default: "Drop the file to start uploading" | "Drop the files to start uploading"
_{The pluralization is based on if used FileDropzone allowsMultiple is set to true.}

disabledTitle ^{ReactNode | ((dragActive: boolean) => ReactNode)}

The title when the dropzone is disabled

Default: "File uploading is currently disabled"

dragRejectedTitle ^ReactNode

The title when invalid file types are being dragged over the zone

Default: "Dragged files have invalid file type"

fileOverloadTitle ^ReactNode

The title when the there are not many files in the dropzone

Default: "Too many files have been dragged"

sx ^{SxProps<Theme>}

Can be used to customize style of the body. It is recommend to modify the sx of the parent component (aka FileDropzone, SingleFileUpload, MultiFileUpload) to add things like border, background, etc.