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?