0

I am uploading multiple images but before uploading i want to compress them all at client side and then want to upload to the server for that i am using dropzone.js (programmatically) as below but the function resizeQuality is not working. All images are uploading with original size.

Where i am going wrong? any suggestions are welcome...

Html:

<form class="dropzone" id="myDropzone" method='POST' action='' enctype='multipart/form-data'>
<div class="fallback"> <!-- this is the fallback if JS isn't working -->
    <label>
    <input name="file" type="file" multiple />
    knkjbnkhbkb </label>
</div>
<div class="dropzone-previews"></div>
</form>

jquery:

    Dropzone.autoDiscover = false;
    Dropzone.options.myDropzone = {
        url: "/dashboard/{{name}}/{{name_product_type.type_product|urlencode}}/{{abc}}",
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 30,
        resizeQuality: 0.6,   <----- NOT WORKING
        maxFiles: 100,
        acceptedFiles: "image/*",

        init: function () {

            var submitButton = document.querySelector("#postbtn");
            var wrapperThis = this;

            submitButton.addEventListener("click", function () {
                wrapperThis.processQueue();
            });

            this.on("addedfile", function (file) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                // Listen to the click event
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();

                    // Remove the file preview.
                    wrapperThis.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                });

                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });

            //this.on('sendingmultiple', function (data, xhr, formData) {
              //  formData.append("Username", $("#Username").val());
            //});
        }
    };

what corrections are required?

Mayuresh Patil
  • 2,072
  • 1
  • 21
  • 44
  • 1
    What images are you uploading? The `resizeQuality` option is actually [passed as an argument to the `canvas.toDataUrl()` method](https://gitlab.com/meno/dropzone/blob/master/src/dropzone.js#L1626), and the [documentation for the method states that quality only works for JPG or WebP images](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). – Terry Nov 02 '17 at 09:42
  • i am uploading .jpg images. so can you give solution that by using this method how can i resize quality of images – Mayuresh Patil Nov 02 '17 at 10:15

0 Answers0