SingleFileUpload

This high level component provides a dropzone where a single file can be dragged onto and then uploaded.
It also provides the user the ability to browse if they don't prefer to drag and drop files.

Usage

Click to upload or drag the file here to start uploading

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

export const Component = () => {
  const uploadService = useXMLHttpService(...);
  return <SingleFileUpload uploadService={uploadService} />
}

Required Props

uploadService ^{FileUploadService<Response>}

The service which is responsible for uploading files provided to the component.
While you are free to create your own uploadService or you can use useXMLHttpService to save time.

Optional Props

All the following props are optional meaning they can be undefined.

acceptsOnly ^string

An accept string indicating the file type / extensions which the component considers valid.
This can be a comma separated string of wildcarded mime type or file extensions.

Default: undefined
_{(This means all file types / extensions are accepted)}

Examples
PDFs Only - application/pdf or .pdf
Any Image - image/*

disabled ^boolean

A boolean indicating whether the component is disabled. When the component is disabled it does not allow dragging, dropping or browsing of files.

Default: false

fileUploadManager ^{FileUploadManager<Response>}

A file upload manager responsible for handling different file upload states.
While you are free to create your own fileUploadManager you can use useFileUploadManager to save time.

Default: useFileUploadManager()

sx ^FileUploadSx

This is very similiar to sx used in MUI library. The only difference is since this component is built from many others applying sx to specific inner components also needs to be possible. Review type definition above for more specifics.

Default: undefined

body ^ReactNode

A custom body to render inside the dropzone. It is highly recommended you use the following hook to get FileDropZoneContext useFileDropzoneContext.

Default: <FileDropZoneBody />

onSuccessfulUpload ^{(fileUpload: FileUpload<Response>) => void}

Called when a upload was successful. If this is provided then successful file uploads need to be rendered externally.

Default: undefined

statusFormatter ^{(fileUpload: FileUpload<Response>) => string}

Returns a custom status label for a file upload e.g. "Uploading", "Failed" or "Completed".

Default: undefined