import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Upload

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

Live Example

<StoryWithControls component="Upload" props={{ multiple: false, disabled: false, listType: "text", showUploadList: true }} controls={[ { name: "multiple", label: "Multiple", type: "boolean", description: "Support multiple file selection." }, { name: "disabled", label: "Disabled", type: "boolean", description: "Disable the upload button." }, { name: "listType", label: "List Type", type: "select", options: [ "text", "picture", "picture-card", "picture-circle" ], description: "Built-in style for the file list display." }, { name: "showUploadList", label: "Show Upload List", type: "boolean", description: "Whether to show the upload file list." } ]} sampleChildren={[{"component":"Button","props":{"children":"Click to Upload"}}]} />

Try It

Edit the code below to experiment with the component:

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

Picture Card Style

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

Drag and Drop

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>
  );
}

Props

Import

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

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::