Dropzone.js transformFile function for resizing images

Viewed 423

I have implemented a drag and drop image upload with Dropzone.js in my Rails app following this tutorial: https://web-crunch.com/posts/rails-drag-drop-active-storage-stimulus-dropzone

Now I also want to resize the images to a maximum width before they are uploaded. Dropzone.js has a transformFile function for this purpose but I haven't managed to make it work. I have tried the following.

When I create the dropzone element, I declare a maximum width (resizeWidth):

function createDropZone(controller) {
  return new Dropzone(controller.element, {
    url: controller.url,
    headers: controller.headers,
    maxFiles: controller.maxFiles,
    maxFilesize: controller.maxFileSize,
    acceptedFiles: controller.acceptedFiles,
    addRemoveLinks: controller.addRemoveLinks,
    resizeWidth: 200,
    autoQueue: false
  });
}

Then, I call the function transformFile inside an addedfile event listener:

this.dropZone.on("addedfile", file => {
      this.dropZone.options.transformFile(file);
      
      setTimeout(() => {
        file.accepted && createDirectUploadController(this, file).start();
      }, 500);
    });

However, the response on the console is Uncaught TypeError: Cannot read property 'resizeWidth' of undefined

Could anybody help me?

0 Answers
Related