Callbacks

DropUpload exposes callbacks for the file lifecycle: selection, discard, rejection, and upload. For driving the component the other way (attaching files from your own code, removing them, starting or cancelling uploads), see Methods (ref).

<DropUpload
  onFilesDropped={(files) => console.log(files)}
  onFilesChanged={(files) => console.log(files)}
  onDiscardFile={(file) => console.log(file)}
  onFilesRejected={(rejectedFiles) => console.log(rejectedFiles)}
  onUploadComplete={(file) => console.log(file)}
  onUploadError={(file, error) => console.log(file, error)}
  onUploadCancel={(file) => console.log(file)}
/>

onFilesDropped

onFilesDropped?: (files: FileList) => void

Fires when files are dropped onto the drop area. Not triggered by click-to-browse selection. Use onFilesChanged to cover both.

onFilesChanged

onFilesChanged?: (files: FileList) => void

Fires on any change to the underlying file input, whether the files came from a drag-and-drop or from clicking the drop area to browse.

onDiscardFile

onDiscardFile?: (file: AttachedFile) => void

Fires when a file is removed from the list, through the long-press discard gesture, or via the removeFile() ref method, so a list you mirror on your side stays in step whoever removed the file. clearFiles() is the exception: emptying the list is a reset, not a discard, and stays quiet.

See Discard delay to control how long the press must be held.

onFilesRejected

onFilesRejected?: (rejectedFiles: RejectedFile[]) => void

Fires when one or more files fail client-side validation: size limits, a disallowed type, spoofed content (declared type doesn't match the file's actual binary content), or the maxFiles limit. Each entry is { name, reason }, where reason is one of "fileTooLarge", "fileTooSmall", "invalidFileType", "spoofedFileType", or "tooManyFiles". Rejected files still appear in attachedFiles with status: "rejected", except "tooManyFiles" ones, which are never attached. See File validation.

onUploadComplete

onUploadComplete?: (file: AttachedFile) => void

Fires when a file finishes uploading successfully. Requires an uploadAdapter to be configured, see Uploading. The file carries the url the adapter reported, so this is where to store the reference to what was just uploaded.

onUploadError

onUploadError?: (file: AttachedFile, error: unknown) => void

Fires when a file fails to upload. error is whatever the configured uploadAdapter rejected with, so its shape depends on the adapter in use. A cancelled upload is not an error and never arrives here.

onUploadCancel

onUploadCancel?: (file: AttachedFile) => void

Fires when an upload that was already in flight is cancelled: from the stop button on the file, from discarding the file while it uploads, from replacing the picture in the avatar variant, or from the cancelUpload ref method. The file arrives with status: "canceled".

Use it to undo whatever the upload had already set in motion on your side: a multipart upload you initiated, a database row you created for the pending file, an analytics event.

It does not fire when the component unmounts. Uploads in flight are aborted then too, but there is nothing left to hear the callback.