Can options be changed after dropzone creation?

[supertravelguru]

A very specific use case. I am using a Wordpress form builder with a built in dropzone form element that uses the dropzonejs library (ref: https://wsform.com/). The dropzone itself is tightly integrated into the form builder and created programmatically.

I would like to extend the dropzone to use a cropping library (cropperjs or doka),

Is it possible to change configuration options after the dropzone has been initialized? Specifically adding the transformFile option to the existing dropzone instance.

Cheers,

--Tim

Edit: typo's

[enyo]

Yes. I can't speak to how well it'll work (it might depend on what you're changing), but you can access and modify myDropzone.options.

[supertravelguru]

Hi @enyo

Thanks, very helpful. I cobbled together the code below that got it working.

Q: I noticed that when the blob returns to dropzone, the file size is not being updated, is there a a function or method to get dropzone to use the new file size?

(function ($) {

    // When WS Form has finished rendering a form, it fires a wsf-rendered event on the document element
    // The event is passed the form object, form_id and instance_id
    $(document).on('wsf-rendered', function (e, form, form_id, instance_id) {

        // Access dropzone from raw HTML element
        rawElement = document.querySelector("div#wsf-1-field-1-dropzone");
        var myDropzone = rawElement.dropzone;

        myDropzone.options.transformFile = function (file, done) {
            // Create Dropzone reference for use in confirm button click handler
            var myDropZone = this;
            // Create the image editor overlay
            var editor = document.createElement('div');
            editor.style.position = 'fixed';
            editor.style.left = 0;
            editor.style.right = 0;
            editor.style.top = 0;
            editor.style.bottom = 0;
            editor.style.zIndex = 9999;
            editor.style.backgroundColor = '#000';
            document.body.appendChild(editor);
            // Create confirm button at the top left of the viewport
            var buttonConfirm = document.createElement('button');
            buttonConfirm.style.position = 'absolute';
            buttonConfirm.style.left = '10px';
            buttonConfirm.style.top = '10px';
            buttonConfirm.style.zIndex = 9999;
            buttonConfirm.textContent = 'Confirm';
            editor.appendChild(buttonConfirm);
            buttonConfirm.addEventListener('click', function () {
                // Get the canvas with image data from Cropper.js
                var canvas = cropper.getCroppedCanvas({
                    width: 256,
                    height: 256
                });
                // Turn the canvas into a Blob (file object without a name)
                canvas.toBlob(function (blob) {
                    // Create a new Dropzone file thumbnail
                    myDropZone.createThumbnail(
                        blob,
                        myDropZone.options.thumbnailWidth,
                        myDropZone.options.thumbnailHeight,
                        myDropZone.options.thumbnailMethod,
                        false,
                        function (dataURL) {

                            // Update the Dropzone file thumbnail
                            myDropZone.emit('thumbnail', file, dataURL);
                            // Return the file to Dropzone
                            done(blob);
                        });
                });
                // Remove the editor from the view
                document.body.removeChild(editor);
            });
            // Create an image node for Cropper.js
            var image = new Image();
            image.src = URL.createObjectURL(file);
            editor.appendChild(image);

            // Create Cropper.js
            var cropper = new Cropper(image, {
                aspectRatio: 1
            });
        };

    });

})(jQuery);

[supertravelguru]

I am guessing something along the lines of node.innerHTML = this.filesize(blob.size); in order to update the filesize to show the blob file size... but not sure how to handle the existing data-dz-size node (which is showing the pre transform file size)