1

I've had many Dropzones throughout my application and to organize my modals a bit better, I have started to dynamically create a modal div whenever I need to open a new popup. I have noticed that when a Dropzone is created in the modal div which is dynamically created, there are two settings which don't work clickable and previewsContainer.

I get the following error:

Uncaught Error: Invalid clickable option provided. Please provide a CSS selector, a plain HTML element or a list of those.

And this is my configuration, which doesn't change between the dynamically-created and pre-created:

{
        dictDefaultMessage: "Drop documents here (or click) to capture/upload.",
        clickable: '.open-upload-prompt',
        timeout: "360000",
        chunking: true,
        maxFilesize: 400000000,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        autoProcessQueue: true,
        parallelUploads: 1,
        addRemoveLinks: true,
        previewsContainer: '.dropzone-preview',
}

If I remove the clickable and previewsContainer, the Dropzone works correctly.

1 Answer 1

0

Based on the error message you provided, it seems that the clickable option in your Dropzone configuration is not being recognized when the modal is dynamically created. This may be because the element with the class .open-upload-prompt is not yet present in the DOM when the configuration is being applied.

Similarly, the previewsContainer option may not be working because the element with the class .dropzone-preview is not yet present in the DOM when the configuration is being applied.

To fix this, you could try initializing the Dropzone object after the modal is fully loaded and the necessary elements are present in the DOM. You could also try using event delegation to ensure that the clickable option is applied to dynamically created elements.

For example, you could wrap your Dropzone initialization code in a function and call it after the modal is fully loaded:

function initDropzone() {
    // Dropzone configuration
    var dropzoneConfig = {
        dictDefaultMessage: "Drop documents here (or click) to capture/upload.",
        clickable: '.open-upload-prompt',
        timeout: "360000",
        chunking: true,
        maxFilesize: 400000000,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        autoProcessQueue: true,
        parallelUploads: 1,
        addRemoveLinks: true,
        previewsContainer: '.dropzone-preview',
    };

    // Initialize Dropzone
    var myDropzone = new Dropzone('.my-dropzone', dropzoneConfig);
}

// Call the initDropzone function after the modal is fully loaded
$(document).on('shown.bs.modal', '#my-modal', function() {
    initDropzone();
});

Alternatively, you could use event delegation to apply the clickable option to dynamically created elements:

// Set up a delegated event handler for clicks on the document
$(document).on('click', '.open-upload-prompt', function() {
    // Create a new modal div with a unique ID
    var modalId = 'my-modal-' + new Date().getTime();
    $('body').append('<div id="' + modalId + '" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="my-dropzone dropzone"></div></div></div></div></div>');

    // Dropzone configuration
    var dropzoneConfig = {
        dictDefaultMessage: "Drop documents here (or click) to capture/upload.",
        timeout: "360000",
        chunking: true,
        maxFilesize: 400000000,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        autoProcessQueue: true,
        parallelUploads: 1,
        addRemoveLinks: true,
        previewsContainer: '.dropzone-preview',
    };

    // Initialize Dropzone on the new modal div
    $('#' + modalId + ' .my-dropzone').addClass('dropzone').dropzone(dropzoneConfig);

    // Show the modal
    $('#' + modalId).modal('show');
});

In this example, the click event is delegated to the document, so it will apply to any element with the class .open-upload-prompt, even if it is dynamically created. When the element is clicked, a new modal div with a unique ID is created, and Dropzone is initialized on the .my-dropzone element within the modal div. The previewsContainer option is not included in the configuration because the preview element will be added dynamically by Dropzone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.