QUploader for images, how to compress images ?

[igor-rotaexata]

I try to compress selected images with a Image Compressor.

So, using ‘filter’ property of QUploader, for each file, i use new ImageCompressor(file), -> return compressed file.
but how much do I use
The problem, ImageCompressor is a async function, need use ‘async’ and ‘await’ to wait callback from ImageCompressor, but how much i use ‘async’ in function called by ‘filter’ property, the following errors are occurred:

Example function
async qUploaderFilter(files) {
// ImageCompressor logic
…
return files;
},

ERROR:

Uncaught TypeError: e.map is not a function
at VueComponent.__add (quasar.mat.esm.js?e083:6)
at invoker (vue.runtime.esm.js?2b0e:2023)
at HTMLInputElement.fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)

…
so, exist another solution for image compression before upload?

[igor-rotaexata]

Ok, i solved my problem with another way, i use the ‘:upload-factory’ property, with a promise, that contains the logic for compress image and send to server API.

Example: [https://github.com/GastroGeek/q-uploader-upload-factory-demo/blob/master/src/pages/index.vue]

[iodoli]

@igor-rotaexata Can you share how you imported Image Compressor as a plugin? Im keep getting error like - “Cannot call a class as a function”.

[nothingismagick]

You should use https://github.com/fengyuanchen/compressorjs instead of Image Compressor because the latter is deprecated and never available. Personally, however, I prefer to work with vue-croppa: https://zhanziyang.github.io/vue-croppa/#/customization

Same features, but a real interface.

[iodoli]

@nothingismagick thanks for advice, I will try to test vue-croppa now. I forgot to mention I used https://github.com/fengyuanchen/compressorjs with v0.17.20 and it gave me that error

[bjbk]

@nothingismagick should I just install vue-croppa as a dependency in my Quasar v1 project? What is the best way to import non Quasar vue-components?