UI/UX

Dropzone

by will

Basic configuration.

const dropzone_config = {
    maxFilesize: 10,
    maxFiles: 50,
    timeout: ajaxTimeOut,
    acceptedFiles: '.jpeg,.jpg,.png',
    autoQueue: true
}

autoQueue: true, which means auto call url to upload itself. If value is false, we have to implement custom upload.

Render and listening events

const dropzone = new Dropzone(elements.stampDropzone, $.extend({
        url: `/eforms/stamp`,
    }, dropzone_config));
    dropzone.on("success", function (file, response) {
        $('.js-view-uploaded-image').html(`<img src="${response.url}" width="100%" heigh="100%" />`)
    });
    dropzone.on("addedfile", file => {
        $('.loading').show();
        
        if (!window.navigator.onLine) {
            myDropzone.removeFile(file)
            alertOffline()
            return
        }
        console.log(`File added: ${file.name}`);
    });
    dropzone.on("complete", file => {
        file.previewElement.remove(); 
        $('.loading').hide();
    });
    dropzoneAlert(dropzone)

on “success” we want to put image url which returned from ajax to custom div. On “complete” we want to remove the preview of image (default).

0