File uploader

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

Finder component

Make sure to link to Filepond css and js files in your document. Filepond has lots of plugins that extends its functionality. Note, you have to link plugins before main Filepond files. Use this page as a reference. Below is the list of plugins we used in our demo:

File Type Validation (filepond-plugin-file-validate-type.min.js)
File Size Validation (filepond-plugin-file-validate-size.min.js)
Image Preview (filepond-plugin-image-preview.min.js)
Image Crop (filepond-plugin-image-crop.min.js)
Image Resize (filepond-plugin-image-resize.min.js)
Image Transform (filepond-plugin-image-transform.min.js)
Core Filepond script (filepond.min.js)

Note, plugins should come before core Filepond script in your document.

The complete list of all available Filepond plugins can be found here.

You can alter file uploader behaviour via attributes that should be added to `<input type="file" class="file-uploader">`.

multiple — Allows multiple files upload (Core plugin).
accept="image/png, image/jpeg, video/mp4..." — Specify what file types to accept (File type validation plugin).
data-style-panel-layout="compact" — Image preview will take up the full width and height of the file uploader component.
data-max-file-size="100KB" — Maximum file size allowed (File size validation plugin).
data-max-files="5" — Maximum number of files per one upload (Core plugin).
data-label-idle — String or HTML. Label that should be displayed in idle state of the file uploader component (Core plugin).
data-image-preview-height — Number. Maximum height of the preview image (Image preview plugin).
data-image-crop-aspect-ratio="1:1" — Crops the image to a certain aspect ratio (Image crop plugin).
data-image-resize-target-width — Number. Resizes the image to a certain width (Image resize plugin).
data-image-resize-target-height — Number. Resizes the image to a certain height (Image resize plugin).

Modifier classes:

file-uploader-grid — Turns image previews in a grid as opposed to list by default.

Plugin documentation:https://pqina.nl/filepond/docs/

Single file upload: Image only + Cropped + Resized (Profile picture)

<!-- Single file upload: Image only + Cropped + Resized (Profile picture) -->
<input class="file-uploader bg-secondary" type="file" accept="image/png, image/jpeg" data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span class="fw-bold">Change picture</span>' data-style-panel-layout="compact" data-image-preview-height="160" data-image-crop-aspect-ratio="1:1" data-image-resize-target-width="200" data-image-resize-target-height="200">

<!-- Light skin -->
<input class="file-uploader border-light bg-faded-light" type="file" accept="image/png, image/jpeg" data-label-idle='<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>' data-style-panel-layout="compact" data-image-preview-height="160" data-image-crop-aspect-ratio="1:1" data-image-resize-target-width="200" data-image-resize-target-height="200">

// Single file upload: Image only + Cropped + Resized (Profile picture)
input(type="file", accept="image/png, image/jpeg", data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span class="fw-bold">Change picture</span>', data-style-panel-layout="compact", data-image-preview-height="160", data-image-crop-aspect-ratio="1:1", data-image-resize-target-width="200", data-image-resize-target-height="200").file-uploader.bg-secondary

// Light skin
input(type="file", accept="image/png, image/jpeg", data-label-idle='<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>', data-style-panel-layout="compact", data-image-preview-height="160", data-image-crop-aspect-ratio="1:1", data-image-resize-target-width="200", data-image-resize-target-height="200").file-uploader.border-light.bg-faded-light

Multiple file upload: Grid of files + File type, size and quantity validation (Gallery)

<!-- Multiple file upload: Grid of files + File type, size and quantity validation (Gallery) -->
<input class="file-uploader file-uploader-grid" type="file" multiple data-max-files="4" data-max-file-size="2MB" accept="image/png, image/jpeg, video/mp4, video/mov" data-label-idle='<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>'>

<!-- Light version -->
<input class="file-uploader file-uploader-grid border-light bg-faded-light" type="file" multiple data-max-files="4" data-max-file-size="2MB" accept="image/png, image/jpeg, video/mp4, video/mov" data-label-idle='<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>'>

// Multiple file upload: Grid of files + File type, size and quantity validation (Gallery)
input(type="file", multiple, data-max-files="4", data-max-file-size="2MB", accept="image/png, image/jpeg, video/mp4, video/mov", data-label-idle='<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>').file-uploader.file-uploader-grid

// Light version
input(type="file", multiple, data-max-files="4", data-max-file-size="2MB", accept="image/png, image/jpeg, video/mp4, video/mov", data-label-idle='<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>').file-uploader.file-uploader-grid.border-light.bg-faded-light