FileUpload

About #

FileUpload uses render props so you can pass a button through. You have access to openFile to open the native file chooser dialog box.

See your browser console for the real File object ready to upload.

Default #

See more about media type.

function () {
  const [value, setValue] = React.useState(null)

  const handleChange = file => {
    setValue(file)
  }

  return (
    <Field label="Avatar" hint="Files must be <200MB" required>
      <FileUpload
        accept="image/*"
        handleAddFile={handleChange}
        handleRemoveFile={handleChange}
        name="avatar"
        onError={console.error}
        value={value}
      >
        {({ openFile }) => <Button onClick={openFile}>Upload avatar</Button>}
      </FileUpload>
    </Field>
  )
}
Copy

Show preview if value exists #

function () {
  const [value, setValue] = React.useState('https://doc-example/example.docx?v=63731713698')

  const handleChange = file => {
    setValue(file)
  }

  return (
    <Field label="File" hint="Files must be <200MB" required>
      <FileUpload
        accept="image/*"
        handleAddFile={handleChange}
        handleRemoveFile={handleChange}
        name="file"
        value={value}
      />
    </Field>
  )
}
Copy

Multiple #

Add multiple property.

function () {
  const [value, setValue] = React.useState(null)

  const handleChange = file => {
    setValue(file)
  }

  return (
    <Field label="Files" hint="Files must be <200MB" required>
      <FileUpload
        accept="application/pdf"
        name="files"
        multiple
        handleAddFile={handleChange}
        handleRemoveFile={handleChange}
      >
        {({ openFile, disabled }) => (
          <Button onClick={openFile} variant="secondary" disabled={disabled}>
            Choose file(s)
          </Button>
        )}
      </FileUpload>
    </Field>
  )
}
Copy

Disabled #

<Field disabled>
  <FileUpload name="disabled">
    {({ openFile, disabled }) => (
      <Button onClick={openFile} disabled={disabled}>
        Choose file
      </Button>
    )}
  </FileUpload>
</Field>
Copy

Customize #

Change Button #

You can change the upload button component.

function () {
  const [value, setValue] = React.useState(null)

  const handleChange = file => {
    setValue(file)
  }

  return (
    <Field>
      <FileUpload name="custom" handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
        {({ openFile, disabled }) => (
          <Button size="xl" shape="circle" onClick={openFile} disabled={disabled}>
            <UploadIcon size="xl" />
          </Button>
        )}
      </FileUpload>
    </Field>
  )
}
Copy

Change Preview #

You can change the preview component.

function() {
  const [value, setValue] = React.useState('https://doc-example/example.docx?v=63731713698')

  const handleChange = file => {
    setValue(file)
  }

  const Preview = ({ file, onRemove }) => {
    const Icon = getFileIcon(file)
    const name = getFileName(file)
    const size = getFileSize(file)

    return (
      <Tag
        backgroundColor="light.900"
        data-id={name}
        key={name}
        mt="sm"
        px="xl"
        h={60}
        size="lg"
        alignItems='center'
      >
        <Icon size="lg" mr="sm" />
        {name}
        {size && <Box color="nude.600">({size})</Box>}
        <Button onClick={onRemove} variant="quaternary" shape="square" ml="xxl" size="sm">
          <CrossIcon size="sm" />
        </Button>
      </Tag>
    )
  }

  return (
    <Field label="File">
      <FileUpload name="file" preview={Preview} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
        {({ openFile, disabled }) => (
          <Button onClick={openFile} disabled={disabled}>
            Custom preview
          </Button>
        )}
      </FileUpload>
    </Field>
  )
}
Copy

You can also set the preview prop to null and handle your own preview in place of the upload button with files & onRemoveFile render props:

function () {
  const [value, setValue] = React.useState(null)

  const handleChange = file => {
    setValue(file)
  }

  return (
    <Field label="File">
      <FileUpload name="file" multiple preview={null} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
        {({ openFile, files, onRemoveFile }) =>
          files.length === 0 ? (
            <Button onClick={openFile}>Upload files</Button>
          ) : (
            <Stack direction="row">
              {files.map(file => (
                <Button key={file.preview} onClick={() => onRemoveFile(file)}>
                  {getFileIcon(file)} Click to remove {file.name}
                </Button>
              ))}
            </Stack>
          )
        }
      </FileUpload>
    </Field>
  )
}
Copy

Properties #

FileUpload #

Packages #

Dependencies #

Peer dependencies #