File upload

Unable to parse html

const PreviewEn = () => (
  <Field>
    <Label>Upload profile picture</Label>
    <Field.Description>
      File must be in csv format and less than 2MB
    </Field.Description>
    <EXPERIMENTAL_FileUpload>
      <Field.Description>Drop file here</Field.Description>
      <Button asChild data-variant='secondary'>
        <span>Upload file</span>
      </Button>
      <input type='file' />
    </EXPERIMENTAL_FileUpload>
  </Field>
);

render(<PreviewEn />)

File upload is a form element used to upload files. The component combines a drag-and-drop area with a regular file picker, so the user can select files either by clicking or by dropping them into the area.

If you need advanced file handling with per-file upload status, you must build this yourself around the component.

Use file upload when

• The user needs to upload one or more files as part of a form.
• You want to support both drag-and-drop and click-to-select.

Avoid file upload when

• The user only needs to choose from a predefined set of options.
• You can collect the information in a simpler way without requiring file upload.

Examples

With description

You can provide a more detailed description inside the upload area.

Unable to parse html

const FileUploadExampleEn = () => (
  <Field>
    <Label>Upload profile picture</Label>
    <Field.Description>description text</Field.Description>
    <EXPERIMENTAL_FileUpload>
      <Field.Description>Drop file here</Field.Description>
      <Field.Description>
        File must be in csv format and less than 2MB
      </Field.Description>
      <Button asChild data-variant='secondary'>
        <span>Upload file</span>
      </Button>
      <input type='file' />
    </EXPERIMENTAL_FileUpload>
  </Field>
);

render(<FileUploadExampleEn />)

Guidelines

Only ask for file upload when it is necessary. If you can collect the information in a simpler way, you should do that instead.

Make sure there is always a visible label that describes what should be uploaded. Also tell the user which requirements apply to the files.

Always state

• which file types are allowed
• any file size limits
• how many files can be uploaded
• what the files will be used for

Text

The button text should be short and action-oriented, for example "Choose files" or "Choose file".

Make sure error messages follow the guidelines for error messages, and use specific error messages for different error situations.