en-US

The simplest usage.

zh-CN

最简单的用法。

import { useState } from 'react';

import { UploadOutlined } from '@react-devui/icons';
import { DUpload, DButton } from '@react-devui/ui';

export default function Demo() {
  const [files, setFiles] = useState([
    {
      uid: 1,
      name: 'logo.svg',
      status: 'load',
      url: '/assets/logo.svg',
      thumbUrl: '/assets/logo.svg',
    },
    {
      uid: 2,
      name: 'logo.svg',
      status: 'load',
      url: '/assets/logo.svg',
    },
    {
      uid: 3,
      name: 'react-devui.png',
      status: 'error',
    },
    {
      uid: 4,
      name: 'react-devui.png',
      status: 'progress',
      percent: 30,
    },
  ]);

  return (
    <DUpload
      dModel={files}
      dTrigger={
        <DButton className="mb-2" dIcon={<UploadOutlined />}>
          Upload
        </DButton>
      }
      dList={<DUpload.List />}
      dXHRRequest={{ url: 'https://rd-upload.free.beeceptor.com' }}
      onModelChange={setFiles}
    >
      {({ trigger, list }) => (
        <>
          {trigger}
          {list}
        </>
      )}
    </DUpload>
  );
}