10_dmf_drop_zone.md

Dynamic Multi File | DropZone

• Resource: https://www.dropzonejs.com
• Handler: {DropzoneHandler}
• Library: Dropzone

---

Implementation

npm i dropzone

CSS

Include CSS. E.g. @import "dropzone/dist/dropzone.css";

Enable Handler

import {DropzoneHandler} from 'js-pimcore-formbuilder';

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
        new DropzoneHandler(form);
    });
});

Extended Usage

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
        new DropzoneHandler(form, {
            dropzoneOptions: {
                // add some dropzone library options 
            },
        });
    });
});

import {Endpoints, DropzoneHandler} from 'js-pimcore-formbuilder';

let formBuilderForms = document.querySelectorAll('.formbuilder.ajax-form');

if (formBuilderForms.length) {
    new Endpoints().getEndpoints(formBuilderForms[0].dataset.ajaxStructureUrl)
        .then((endpoints) => {
            formBuilderForms.forEach((formBuilderForm) => {
                new DropzoneHandler(form, {
                    dropzoneOptions: {
                        // add some dropzone library options 
                    }
                    // set enpoints to prevent multiple identical requests
                }, endpoints);
            });
        }).catch((error) => {
        console.error('formbuilder error: fetching file structure', error);
    });
}