@saas-ui/file-upload
TypeScript icon, indicating that this package has built-in type declarations

0.2.4 • Public • Published

@saas-ui/file-upload

File Upload component with drag and drop support for Chakra UI.

Installation

$ yarn add @saas-ui/file-upload

#or

$ npm i @saas-ui/file-upload  --save

Usage

import { Text, HStack, Button } from '@chakra-ui/react'
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadButton,
} from '@saas-ui/file-upload'

const Page = () => {
  return (
    <FileUpload maxFileSize={1024 * 1024} maxFiles={1} accept="image/*">
      {({ files, deleteFile }) => (
        <FileUploadDropzone>
          <Text fontSize="sm">Drag your image here</Text>
          {!files?.length ? (
            <FileUploadButton as={Button}>Select files</FileUploadButton>
          ) : (
            <HStack>
              <Text fontSize="sm">{files[0].name}</Text>
              <Button
                onClick={(e) => {
                  e.stopPropagation()
                  deleteFile(files[0])
                }}
              >
                Clear
              </Button>
            </HStack>
          )}
        </FileUploadDropzone>
      )}
    </FileUpload>
  )
}

License

MIT - Appulse Software

Package Sidebar

Install

npm i @saas-ui/file-upload

Homepage

saas-ui.dev/

Weekly Downloads

340

Version

0.2.4

License

MIT

Unpacked Size

146 kB

Total Files

12

Last publish

Collaborators

  • eelcow