en-US

Drag the file into the designated area to complete the upload.

zh-CN

把文件拖入指定区域，完成上传。

import { DUpload } from '@react-devui/ui';

export default function Demo() {
  return (
    <DUpload
      dTrigger={<div className="container mb-2">Click or Drag file to this area to upload</div>}
      dList={<DUpload.List />}
      dXHRRequest={{ url: 'https://rd-upload.free.beeceptor.com' }}
      dDrag
    >
      {({ trigger, list }) => (
        <>
          {trigger}
          {list}
        </>
      )}
    </DUpload>
  );
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  text-align: center;
  background-color: var(--rd-background-color-hover);
  border: 1px dashed var(--rd-color-border);
}