drag-uploader

import { DragUploader } from "upload";

DragUploader

Drag and drop for files. To upload files, click or drop file on uploading area, choose files in an opened dialog window. To set file types, you should set the 'accept' property. You can pass any content to show over uploading area. DragUploader pass priority to style uploading area.

Example

Drag 'n' drop some files here, or click to select files
<Playground>
  <StateEvent initial={[]} change={(files) => files}>
    {(files, change) => (
      <div style={{ display: 'flex' }}>
        <div style={{ minWidth: '600px', height: '300px', padding: '10px' }}>
          <DragUploader
            content={
              <FormBlock style={{ alignItems: 'center' }}>
                <div style={{ padding: '10px', textAlign: 'center' }}>
                  {files.length === 0 ? (
                    <>Drag 'n' drop some files here, or click to select files</>
                  ) : (
                    <> You chose {files.length} files</>
                  )}
                </div>
                <Button text="Upload files " priority="primary" />
              </FormBlock>
            }
          />
        </div>
        <div style={{ padding: '10px' }}>
          {files.map((file) => (
            <div key={file.name}>{file.name}</div>
          ))}
        </div>
      </div>
    )}
  </StateEvent>
</Playground>

Load only png files

To set extensions of files that users can upload, you can pass an 'accept' property.

You can upload only png images
<Playground>
  <StateEvent initial={[]} change={(files) => files}>
    {(files, change) => (
      <div style={{ display: 'flex' }}>
        <div style={{ minWidth: '600px', height: '300px', padding: '10px' }}>
          <DragUploader
            content="You can upload only png images"
            onDrop={change}
            accept="image/png"
            center
          />
        </div>
        <div style={{ padding: '10px' }}>
          {files.map((file) => (
            <div key={file.name}>{file.name}</div>
          ))}
        </div>
      </div>
    )}
  </StateEvent>
</Playground>

Disabled DragUploader

<Playground>
  <div style={{ minWidth: '600px', height: '300px', padding: '10px' }}>
    <DragUploader
      content={<Button text="Disabled button" priority="primary" disabled />}
      disabled
      center
    />
  </div>
</Playground>

Props

NameTypeDefaultDescription
acceptstring ÓŹ string[]File extensions that are accepted to load
contentReact.ReactNodePass any content within DragUploader component.
disabledbooleanfalseEnable/disable DragUploader
maxFilesnumber0Max number of files to load. The default value is 0 which means there is no limitation to how many files are accepted.
maxSizenumberInfinityMax file size (in bytes)
multiplebooleanfalseallow add multiple files
onDrop<T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;Callback for when the drop event occurs
prioritystring'secondary'Priority prop to style UploaderArea component
validator<T extends File>(file: T) => FileError \| FileError[] \| null;Fn that validate loaded files