@seragam-ui/file-upload v1.0.7

@seragam-ui/file-upload

Component for uploading files. It is based on Dropzone.

Installation

yarn add @seragam-ui/file-upload
# or
npm i @seragam-ui/file-upload

How to use

This example shows how to use the component with React Hook Form.

import { FileUpload } from '@seragam-ui/file-upload'
import { useForm } from 'react-hook-form'

const App = () => {
  const [isUploading, setIsUploading] = React.useState(false)
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    mode: 'onChange',
  })

  const handleRejected = (error: string) => {
    console.log(error)
  }

  const handleDrop = (files: File[]) => {
    // do upload files here
    // and toggle isUploading state here
    console.log(files)
  }

  const handleDeleteClick = (filename: string) => {
    console.log(filename)
  }

  const onSubmit = (data: any) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FileUpload
        {...register('programFile', {
          required: {
            value: true,
            message: '',
          },
        })}
        accept={['jpg', 'jpeg', 'png']}
        helperText="Ukuran maksimal 1mb"
        label="Unggah bukti Aksi Nyata Anda"
        onDrop={handleDrop}
        onDropRejected={handleRejected}
        onDeleteClick={handleDeleteClick}
        errorState={errors.programFile?.type}
        isUploading={isUploading}
      />

      <Button type="submit">Submit</Button>
    </form>
  )
}