React

// App.js
 
import { UploProvider } from '@uplo/react'
 
export const App = ({ children }) => {
  return <UploProvider host={process.env.API_URL}>{children}</UploProvider>
}

import { useDirectUpload } from '@uplo/react'
 
export const Page = () => {
  const {
    uploads,
    uploadFile,
    uploading,
    error,
    signedIds,
    clear: clearUploads,
  } = useDirectUpload('user.avatar', { multiple: false })
 
  const onFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return
 
    const file = e.target.files[0]
 
    try {
      const uploadData = await uploadFile({ file })
 
      if (uploadData.signedId) {
        await updateCurrentUser({ avatarSignedId: uploadData.signedId })
      }
    } catch (e) {
      // Capture exception
    }
  }
 
  return (
    <div>
      <input type="file" onChange={onFileChange} />
    </div>
  )
}