File uploader

Component for uploading any file type with built-in validation and image optimization.

Finder component

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'
/>