Resize an uploaded image

package.json

@@ -28,6 +28,7 @@
     "core-js": "^3.8.3",
     "express": "^4.17.1",
     "firebase": "^8.2.7",
+    "image-blob-reduce": "^2.2.2",
     "js-cookie": "^2.2.1",
     "lodash.orderby": "^4.6.0",
     "nuxt": "^2.14.12",

plugins/api-helpers.js

@@ -4,7 +4,10 @@
  */
 
 import { authenticate } from 'pixabay-api'
+
+import imageBlobReduce from 'image-blob-reduce'
 const { searchImages } = authenticate(process.env.pixabayKey)
+const reduce = imageBlobReduce()
 
 const fakeRequestPromise = (delay = 1000) => {
   return new Promise((resolve, reject) => {
@@ -119,22 +122,29 @@ function getStorageDirName() {
   else return 'demo'
 }
 
-// ToDo: Resize an uploaded image
+// ToDo: Improve readability and error handling
 function uploadURLToStorage(url) {
   const that = this
   const dirName = getStorageDirName.call(this)
   const fileName = url.split('/').slice(-1)[0]
   return new Promise(function (resolve, reject) {
     getFileBlob(url, (blob) => {
       try {
-        const path = `${dirName}/${fileName}`
-        const storageRef = that.$fire.storage.ref().child(path)
-        storageRef.put(blob).then(function (snapshot) {
-          storageRef.getDownloadURL().then(function (url) {
-            const res = { imagePath: path, url }
-            resolve(res)
+        reduce
+          .toBlob(blob, { max: 400 })
+          .then((blob) => {
+            return blob
+          })
+          .then((blobResized) => {
+            const path = `${dirName}/${fileName}`
+            const storageRef = that.$fire.storage.ref().child(path)
+            storageRef.put(blobResized).then(function (snapshot) {
+              storageRef.getDownloadURL().then(function (url) {
+                const res = { imagePath: path, url }
+                resolve(res)
+              })
+            })
           })
-        })
       } catch (e) {
         alert(e.message)
       }