FileUpload
A file upload component allows users to select and upload files.
Source
@saas-ui/file-upload
- 2.11.2 (latest)
Import
import {FileUpload,FileUploadTrigger,FileUploadDropzone,FileUploadPreview,} from '@saas-ui/file-upload'
FileUpload
: Manages state and context.FileUploadTrigger
: That triggers the file selection dialog when clicked.FileUploadDropzone
: Allows users to drag and drop files for upload.FileUploadPreview
: Show an image preview for a selected image.
Usage
Basic
This shows a basic example that accepts one image of maximum 1MB.
import { Text, HStack, Button } from '@chakra-ui/react'import {FileUpload,FileUploadTrigger,FileUploadDropzone,} from '@saas-ui/file-upload'export default function Basic() {return (<FileUpload maxFileSize={1024 * 1024} maxFiles={1} accept="image/*">{({ acceptedFiles, deleteFile }) => (<FileUploadDropzone><Text fontSize="sm">Drag your image here</Text>{!acceptedFiles?.length ? (<FileUploadTrigger as={Button}>Select files</FileUploadTrigger>) : (<HStack><Text fontSize="sm">{acceptedFiles[0].name}</Text><ButtononClick={(e) => {e.stopPropagation()deleteFile(acceptedFiles[0])}}>Clear</Button></HStack>)}</FileUploadDropzone>)}</FileUpload>)}
Multiple files
Set maxFiles
to increase the amount of accepted files.
import { Text, HStack, Button } from '@chakra-ui/react'import {FileUpload,FileUploadTrigger,FileUploadDropzone,} from '@saas-ui/file-upload'export default function MultipleFiles() {return (<FileUpload maxFileSize={1024 * 1024} maxFiles={10} accept="image/*">{({ acceptedFiles, clearFiles }) => (<FileUploadDropzone><Text fontSize="sm">Drag your image(s) here</Text>{!acceptedFiles?.length ? (<FileUploadTrigger as={Button}>Select image(s)</FileUploadTrigger>) : (<HStack><Text fontSize="sm">{acceptedFiles.length} selected</Text><ButtononClick={(e) => {e.stopPropagation()clearFiles()}}>Clear</Button></HStack>)}</FileUploadDropzone>)}</FileUpload>)}
Image preview
import { Text, HStack, Button } from '@chakra-ui/react'import {FileUpload,FileUploadTrigger,FileUploadDropzone,FileUploadPreview,} from '@saas-ui/file-upload'export default function Basic() {return (<FileUpload maxFileSize={1024 * 1024} maxFiles={1} accept="image/*">{({ acceptedFiles, deleteFile }) => (<FileUploadDropzone>{!acceptedFiles?.length ? (<><Text fontSize="sm">Drag your image here</Text><FileUploadTrigger as={Button}>Select files</FileUploadTrigger></>) : (<HStack><FileUploadPreview file={acceptedFiles[0]} width="200px" /><ButtononClick={(e) => {e.stopPropagation()deleteFile(acceptedFiles[0])}}>Remove</Button></HStack>)}</FileUploadDropzone>)}</FileUpload>)}
Form field
FileUpload can be used in a Form
by creating a custom field using createField
provided by @saas-ui/forms
.
Make sure isControlled
is set to true and call the onChange
handler inside the onFileChange
callback to pass the file to the form state.
import { Text, HStack, Button } from '@chakra-ui/react'import {FileUpload,FileUploadTrigger,FileUploadDropzone,} from '@saas-ui/file-upload'import {Form,FormLayout,SubmitButton,} from '@saas-ui/react'import { createField } from '@saas-ui/forms'import { forwardRef } from 'react';const UploadField = createField(forwardRef((props, ref) => {const { onChange, ...rest } = propsreturn (<FileUploadmaxFileSize={1024 * 1024}accept="image/*"{...rest}onFileChange={(files) => {onChange(files.acceptedFiles)}}maxFiles={1}inputRef={ref}>{({ acceptedFiles, deleteFile }) => (<FileUploadDropzone><Text fontSize="sm">Drag your image here</Text>{!acceptedFiles?.length ? (<FileUploadTrigger as={Button}>Select files</FileUploadTrigger>) : (<HStack><Text fontSize="sm">{acceptedFiles[0].name}</Text><ButtononClick={(e) => {e.stopPropagation()deleteFile(acceptedFiles[0])}}>Clear</Button></HStack>)}</FileUploadDropzone>)}</FileUpload>)}),{isControlled: true,})export default function FormField() {return (<FormonSubmit={async (data) => {const formData = new FormData()if (data.file) {formData.append('profilePicture', data.file)formData.append('meta',JSON.stringify({filename: data.file.name,size: data.file.size,type: data.file.type,}))formData.append('name', data.name)}formData.append('name', data.name)return fetch('/api/user', {method: 'POST',body: formData,}).then((response) => {if (response.ok) {// Handle successful upload} else {// Handle error}})}}>{({ Field }) => (<FormLayout><Field name="name" label="Your name" /><UploadField name="file" label="Profile picture" /><SubmitButton /></FormLayout>)}</Form>)}
Was this helpful?