DropzoneJS
DropzoneJS is an open source library that provides drag and drop file uploads with image previews.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                dropzone: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="dropzone"></div>
var myDropzone = new Dropzone(".dropzone", { url: "/file/post"});
NameDescription
.dropzoneMain container
.dropzone.dropzone-button-smApply a smaller size of the container
Customize variables at:/library/extend/components/_dropzone.scss
Component's defaults:/library/components/dropzone/_defaults.scss
NameDefault valueNote
$dx-dropzone-init-default-themetrue
$dx-dropzone-default-padding20px
$dx-dropzone-default-min-height150px
$dx-dropzone-default-border-width2px
$dx-dropzone-default-border-styledashed
$dx-dropzone-default-border-radius4px
$dx-dropzone-default-transition.15s
$dx-dropzone-default-mark-icon-size24
$dx-dropzone-default-backgroundui-base-color-1
$dx-dropzone-hover-backgroundui-base-color-2
$dx-dropzone-default-font-size14px
$dx-dropzone-default-font-weight400
$dx-dropzone-default-font-familynull
$dx-dropzone-default-drag-hover-message-colorprimary-contrast
$dx-dropzone-preview-spacing16px
$dx-dropzone-preview-size200px
$dx-dropzone-preview-border-radius8px
$dx-dropzone-preview-backgroundtransparent
$dx-dropzone-preview-details-backgroundrgba(255, 255, 255, 0.2)
$dx-dropzone-preview-details-hover-backgroundrgba(255, 255, 255, 0.6)
$dx-dropzone-upload-action-btn-bgprimary;
$dx-dropzone-upload-action-btn-colorprimary-contrast;
$dx-dropzone-upload-action-btn-hover-bgprimary-shade-08;
$dx-dropzone-upload-action-btn-hover-colorprimary-shade-08-contrast;
$dx-dropzone-upload-action-btn-active-bgprimary-shade-24;
$dx-dropzone-upload-action-btn-active-colorprimary-shade-24-contrast;
$dx-dropzone-progress-width90%
$dx-dropzone-progress-height3px
$dx-dropzone-progress-left5%
$dx-dropzone-progress-bottom5%
$dx-dropzone-progress-border-width0
$dx-dropzone-progress-border-radius100px
$dx-dropzone-progress-border-colortransparent
$dx-dropzone-progress-backgroundprimary-t-12
$dx-dropzone-progress-bar-backgroundprimary
$dx-dropzone-tooltip-padding-y8px
$dx-dropzone-tooltip-padding-x8px
$dx-dropzone-tooltip-border-radius4px
$dx-dropzone-tooltip-edge-spacing10px
$dx-dropzone-tooltip-font-sizenull
$dx-dropzone-tooltip-error-backgroundrgb(190, 38, 38)
$dx-dropzone-tooltip-error-colorwhite
$dx-dropzone-list-item-padding14px;
$dx-dropzone-list-item-separator-colordivider;
$dx-dropzone-list-item-name-font-size14px;
$dx-dropzone-list-item-name-font-weight400;
$dx-dropzone-list-item-name-colormain-text-color;

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

{title}