Uppy
Uppy fetches files locally and from remote places like Dropbox or Instagram. With its seamless integration, reliability and ease of use, Uppy is truly your best friend in file uploading.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                uppy: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="uppy"></div>
var uppy = Uppy.Core()
.use(Uppy.Dashboard, {
    inline: true,
    target: '.uppy'
})
.use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})

uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful)
})
Customize variables at:/library/extend/components/_uppy.scss
Component's defaults:/library/components/uppy/_defaults.scss
NameDefault valueNote
$dashboard-bgui-base-color-2;
$dashboard-border-colorui-base-color-4;
$dashboard-text-colormain-text-color;
$dashboard-link-text-colorlink-color;
$dashboard-placeholder-title-text-color$dashboard-text-color;
$dashboard-placeholder-info-text-colortext-muted;
$dashboard-bar-bgui-base-color-3;
$dashboard-bar-borderui-base-color-4;
$dashboard-bar-text-colormain-text-color;
$dashboard-bar-muted-text-colortext-muted;
$dashboard-progressprimary;
$dashboard-successsuccess;
$dashboard-failuredanger;
$dashboard-input-padding-y.532rem;
$dashboard-input-padding-x.75rem;
$dashboard-input-font-size$font-size-base;
$dashboard-input-weight$font-weight-normal;
$dashboard-input-border-radius$border-radius;
$dashboard-input-placeholder-colorform-input-placeholder-color;
$dashboard-input-bgform-input-bg;
$dashboard-input-colorform-input-text-color;
$dashboard-input-border-colorform-input-border;
$dashboard-input-box-shadow0 0 0 0 transparent;
$dashboard-input-hover-bgform-input-hover-bg;
$dashboard-input-hover-colorform-input-hover-text-color;
$dashboard-input-hover-border-colorform-input-hover-border;
$dashboard-input-hover-box-shadowform-input-hover-box-shadow;
$dashboard-input-focus-bgform-input-focus-bg;
$dashboard-input-focus-colorform-input-focus-text-color;
$dashboard-input-focus-border-colorform-input-focus-border;
$dashboard-input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow);Requires @use "@library/sass/modules/property";
$dashboard-btn-primary-colorprimary-contrast;
$dashboard-btn-primary-bgprimary;
$dashboard-btn-primary-box-shadownone;
$dashboard-btn-primary-hover-colorprimary-shade-08-contrast;
$dashboard-btn-primary-hover-bgprimary-shade-08;
$dashboard-btn-primary-hover-box-shadownone;
$dashboard-btn-primary-focus-colorprimary-shade-16-contrast;
$dashboard-btn-primary-focus-bgprimary-shade-16;
$dashboard-btn-primary-focus-box-shadownone;
$dashboard-btn-upload-colorsuccess-contrast;
$dashboard-btn-upload-bgsuccess;
$dashboard-btn-upload-box-shadownone;
$dashboard-btn-upload-hover-colorsuccess-shade-08-contrast;
$dashboard-btn-upload-hover-bgsuccess-shade-08;
$dashboard-btn-upload-hover-box-shadownone;
$dashboard-btn-upload-focus-colorsuccess-shade-16-contrast;
$dashboard-btn-upload-focus-bgsuccess-shade-16;
$dashboard-btn-upload-focus-box-shadownone;
$dashboard-btn-naked-colorprimary;
$dashboard-btn-naked-bgtransparent;
$dashboard-btn-naked-hover-colorprimary;
$dashboard-btn-naked-hover-bgprimary-t-08;
$dashboard-btn-naked-active-colorprimary;
$dashboard-btn-naked-active-bgprimary-t-12;

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

{title}