Component for uploading any file type with built-in validation and image optimization.
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.
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 className="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span className="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 className="d-inline-block fi-camera-plus fs-2 text-light mb-2"></i><br><span className="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'
/>
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 className="btn btn-primary mb-3"><i className="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 className="btn btn-primary mb-3"><i className="fi-cloud-upload me-1"></i>Upload photos / video</div><div className="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'
/>