Buy nowFile uploader
Component for uploading any file type with built-in validation and image optimization.
Finder component
File uploader component is powered by FilePond React plugin. Check plugin documentation here
The complete list of all available Filepond plugins can be found here.
Single file upload: Image only + Cropped + Resized (Profile picture)
import { useState } from 'react'
import { FilePond, registerPlugin } from 'react-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
import FilePondPluginImageCrop from 'filepond-plugin-image-crop'
import FilePondPluginImageResize from 'filepond-plugin-image-resize'
import FilePondPluginImageTransform from 'filepond-plugin-image-transform'
{/* Register Filepond plugins */}
registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform
)
{/* Init state */}
const [profile, setProfile] = useState([])
{/* Render FilePond component with props */}
<FilePond
files={profile}
onupdatefiles={setProfile}
// server='/api' {/* Configure your server here. See plugin docs */}
name='profile'
labelIdle='<i class="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span class="fw-bold">Change picture</span>'
acceptedFileTypes={['image/png', 'image/jpeg']}
stylePanelLayout='compact'
imagePreviewHeight={160}
imageCropAspectRatio='1:1'
imageResizeTargetWidth={200}
imageResizeTargetHeight={200}
className='file-uploader bg-secondary'
/>
{/* Light version to display on dark backgrounds */}
<FilePond
files={profile}
onupdatefiles={setProfile}
// server='/api' {/* Configure your server here. See plugin docs */}
name='profile'
labelIdle='<i class="d-inline-block fi-camera-plus fs-2 text-light mb-2"></i><br><span class="fw-bold text-light opacity-70">Change picture</span>'
acceptedFileTypes={['image/png', 'image/jpeg']}
stylePanelLayout='compact'
imagePreviewHeight={160}
imageCropAspectRatio='1:1'
imageResizeTargetWidth={200}
imageResizeTargetHeight={200}
className='file-uploader border-light bg-faded-light'
/>Multiple file upload: Grid of files + File type, size and quantity validation (Gallery)
import { useState } from 'react'
import { FilePond, registerPlugin } from 'react-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
import FilePondPluginImageCrop from 'filepond-plugin-image-crop'
import FilePondPluginImageResize from 'filepond-plugin-image-resize'
import FilePondPluginImageTransform from 'filepond-plugin-image-transform'
{/* Register Filepond plugins */}
registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform
)
{/* Init state */}
const [gallery, setGallery] = useState([])
{/* Render FilePond component with props */}
<FilePond
files={gallery}
onupdatefiles={setGallery}
// server='/api' {/* Configure your server here. See plugin docs */}
name='gallery'
labelIdle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div>or drag them in</div>'
acceptedFileTypes={['image/png', 'image/jpeg', 'video/mp4', 'video/mov']}
allowMultiple={true}
maxFiles={4}
maxFileSize='2MB'
className='file-uploader file-uploader-grid'
/>
{/* Light version to display on dark backgrounds */}
<FilePond
files={gallery}
onupdatefiles={setGallery}
// server='/api' {/* Configure your server here. See plugin docs */}
name='gallery'
labelIdle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div class="text-white opacity-70">or drag them in</div>'
acceptedFileTypes={['image/png', 'image/jpeg', 'video/mp4', 'video/mov']}
allowMultiple={true}
maxFiles={4}
maxFileSize='2MB'
className='file-uploader file-uploader-grid border-light bg-faded-light'
/>