button-uploader

import { ButtonUploader } from "upload";

Upload Button

Simple upload button. To upload files, click on a button, choose files in an opened dialog window. To set file types, you should set the 'accept' property.

Example

<Playground>
  <StateEvent initial={[]} change={(files) => files}>
    {(files, change) => (
      <div style={{ display: 'flex' }}>
        <ButtonUploader
          text="Upload files"
          icon={<IconPlus />}
          priority="primary"
          onChange={change}
        />
        <div style={{ padding: '0 10px' }}>
          {files.map((file) => (
            <div key={file.name}>{file.name}</div>
          ))}
        </div>
      </div>
    )}
  </StateEvent>
</Playground>

Disabled upload button

<Playground>
  <StateEvent initial={[]} change={(files) => files}>
    {(files, change) => (
      <ButtonUploader
        text="You can't upload files"
        icon={<IconPlus />}
        onChange={change}
        priority="primary"
        disabled
      />
    )}
  </StateEvent>
</Playground>

Props

NameTypeDefaultDescription
acceptstring ÓŹ string[]File extensions that are accepted to load
disabledbooleanfalseEnable/disable upload button
iconReact.ReactNodeButton icon
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
onChange<T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;Callback for change event
outlinedbooleanfalseSet button to be outlined
prioritystring'secondary'Priority prop to style upload area
textstringButton text
validator<T extends File>(file: T) => FileError \| FileError[] \| null;Fn that validate loaded files