Upload

Upload component for file selection and uploading. Supports drag-and-drop, multiple files, and different list display styles.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Upload>
      <Button>Click to Upload</Button>
    </Upload>
  );
}

Result

Loading...

Picture Card Style

Live Editor

function PictureCard() {
  return (
    <Upload listType="picture-card">
      + Upload
    </Upload>
  );
}

Result

Loading...

Drag and Drop

Live Editor

function DragDrop() {
  return (
    <Upload.Dragger>
      <p style={{ fontSize: 48, color: '#999', margin: 0 }}>+</p>
      <p>Click or drag file to this area to upload</p>
      <p style={{ color: '#999' }}>Support for single or bulk upload.</p>
    </Upload.Dragger>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
multiple	boolean	false	Support multiple file selection.
disabled	boolean	false	Disable the upload button.
listType	string	"text"	Built-in style for the file list display.
showUploadList	boolean	true	Whether to show the upload file list.

Import

import { Upload } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.