Skip to main content
Search...

useUploader

React hook for accessing upload state and dispatching commands.

useUploader() subscribes to the store and returns a structured view of upload items along with dispatch and event helpers.

Return Shape

PropertyTypeDescription
itemsUploadItem[]Array of all upload items
byPhaseRecord<Phase, UploadItem[]>Items grouped by their current phase
dispatch(command: UploadCommand) => voidSend commands to the store
on / offEvent helpersSubscribe to and unsubscribe from upload events
uploadingUploadItem[]Convenience: items currently uploading
pausedUploadItem[]Convenience: paused items
completedUploadItem[]Convenience: completed items
failedUploadItem[]Convenience: failed items
readyUploadItem[]Convenience: items ready to start

Example

const { items, dispatch, on } = useUploader()
 
React.useEffect(() => {
  return on('upload.completed', ({ localId, result }) => {
    console.log(localId, result)
  })
}, [on])
const { items, dispatch, on } = useUploader()
 
React.useEffect(() => {
  return on('upload.completed', ({ localId, result }) => {
    console.log(localId, result)
  })
}, [on])

Dispatching Commands

// Add files
dispatch({ type: 'addFiles', files: selectedFiles, purpose: 'avatar' })
 
// Start a specific upload
dispatch({ type: 'start', localId: item.localId })
 
// Pause an upload
dispatch({ type: 'pause', localId: item.localId })
 
// Resume a paused upload
dispatch({ type: 'resume', localId: item.localId })
 
// Cancel an upload
dispatch({ type: 'cancel', localId: item.localId })
// Add files
dispatch({ type: 'addFiles', files: selectedFiles, purpose: 'avatar' })
 
// Start a specific upload
dispatch({ type: 'start', localId: item.localId })
 
// Pause an upload
dispatch({ type: 'pause', localId: item.localId })
 
// Resume a paused upload
dispatch({ type: 'resume', localId: item.localId })
 
// Cancel an upload
dispatch({ type: 'cancel', localId: item.localId })

Tip

If you need direct access to the store (e.g., getSnapshot or waitFor), use useUploaderActions() instead.

UploadProviderOverview