I have a unique Vue application with an upload component that allows users to select an image (via dropzone), crop it using cropperjs, and then return the cropped image back to the dropzone. Now, I am looking to compress the image right before uploading it. However, I am encountering an error that is preventing me from progressing further. Here is the current scenario:
Cropping process:
cropImage() {
// Obtain image data for post-processing, such as uploading or setting image source
this.$refs.cropper.getCroppedCanvas().toBlob((blob)=> {
var croppedFile = this.blobToFile(blob, this.fileName)
croppedFile.accepted = true
this.$refs.myVueDropzone.dropzone.addFile(croppedFile)
this.cropperReset()
});
},
At this stage, my dropzone correctly displays the cropped images and generates the cropper thumbnail.
Next, I plan to trigger the upload method while compressing the image just before processing the queue.
launchUpload() {
new Compressor(this.$refs.myVueDropzone.dropzone.files[0], {
quality: 0.6,
maxWidth: 250,
minWidth: 250,
success(compressedResult){
this.testFunction(compressedResult)
},
error(err) {
console.log(err.message);
},
})
/*await this.$refs.myVueDropzone.processQueue()
this.$refs.myVueDropzone.removeAllFiles()*/
}
I pass the file to the Compressor, define certain settings, and expect to receive the "compressedResult" blob, which represents the compressed version of the image. My issue arises when I try to use testFunction within this context:
"Uncaught TypeError: this.testFunction is not a function"
testFunction serves as a placeholder function that I created after exhausting all other options.
testFunction(compressed){
this.$refs.myVueDropzone.removeAllFiles()
this.$refs.myVueDropzone.addFile(compressed)
},
The console.log inside testFunction returns "undefined," indicating that nothing seems to be working properly.
All the methods mentioned here are part of the "methods" object within the Vue component.
This is the section of the Vue code where the components interact:
<v-dialog
v-model="is_show"
persistent
max-width="800px"
>
<v-card>
<v-card-title>
<span class="text-h5">Upload File</span>
</v-card-title>
<v-card-text>
<vue-dropzone
ref="myVueDropzone"
id="dropzone"
:options="dropzoneOptions"
@vdropzone-file-added="(file) => passToCropper(file)"
@vdropzone-complete="reloadAndClose"
></vue-dropzone>
<v-col cols="12" class="text-right">
<v-btn
@click="closeModal"
class="ma-2"
:disabled="loading"
>
Close
</v-btn>
<v-btn
@click="launchUpload"
class="ma-2"
color="primary"
:loading="loading"
>
Submit
</v-btn>
</v-col>
</v-card-text>
</v-card>
</v-dialog>
Everything functions smoothly if I skip the image compression step and proceed with processing my dropzone queue immediately after the "addFile" action in the cropImage method.
Thank you in advance for your assistance!