FilePond
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                filepond: {
                    imagePreview: false,
                    plugins: false
                }
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input type="file">
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
NameDescription
.filepondDisplay as a list
.filepond-avatarDisplay as avatar uploader instead of using .filepond
Customize variables at:/library/extend/components/_filepond.scss
Component's defaults:/library/components/filepond/_defaults.scss
NameDefault valueNote
$placeholder-bgtransparent;
$placeholder-border-colordivider;
$placeholder-border-stylesolid;
$placeholder-border-width2px;
$placeholder-hover-bgtransparent;
$placeholder-hover-border-colorprimary-t-34;
$placeholder-label-colormain-text-color;
$file-item-bgui-base-color-3;
$file-item-colormain-text-color;
$file-item-image-previewer-bgui-base-color-2;
$indicator-idle-colorsecondary-t-42;
$indicator-failure-colordanger-t-42;
$indicator-success-colorsuccess-t-42;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}