Merge pull request #69 from ArtuGit/dev

Dev

components/collections/Collection.vue

@@ -203,7 +203,7 @@ export default {
           break
         case 'test':
           this.toggleLoading()
-          this.$store.dispatch('collections/test').then(() => {
+          this.$store.dispatch('collections/test', this.collection).then(() => {
             this.toggleLoading()
           })
           break

package.json

@@ -25,6 +25,7 @@
     "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/firebase": "^7.5.0",
+    "browser-image-compression": "^1.0.14",
     "core-js": "^3.9.1",
     "firebase": "^8.3.0",
     "image-blob-reduce": "^2.2.2",

plugins/api-helpers.js

@@ -1,13 +1,11 @@
 /*
  * Developed by Artu, https://github.com/ArtuGit
- * Copyleft 2020-2021.
+ *  Copyleft 2020-2021.
  */
 
 import { authenticate } from 'pixabay-api'
-
-import imageBlobReduce from 'image-blob-reduce'
+import imageCompression from 'browser-image-compression'
 const { searchImages } = authenticate(process.env.pixabayKey)
-const reduce = imageBlobReduce()
 
 const fakeRequestPromise = (delay = 1000) => {
   return new Promise((resolve, reject) => {
@@ -99,16 +97,6 @@ function makeFBQuery(context, pStr) {
   return rStr
 }
 
-function getFileBlob(url, cb) {
-  const xhr = new XMLHttpRequest()
-  xhr.open('GET', url)
-  xhr.responseType = 'blob'
-  xhr.addEventListener('load', function () {
-    cb(xhr.response)
-  })
-  xhr.send()
-}
-
 function getStorageDirName() {
   let isAdmin, uuid
   if (this.getters) {
@@ -122,34 +110,28 @@ function getStorageDirName() {
   else return 'demo'
 }
 
-// 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 {
-        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)
-      }
+async function uploadURLToStorage(url) {
+  try {
+    const dirName = getStorageDirName.call(this)
+    const fileName = url.split('/').slice(-1)[0]
+    const path = `${dirName}/${fileName}`
+    let blob = await this.$axios.$get(url, {
+      baseURL: null,
+      responseType: 'blob',
     })
-  })
+    blob = await imageCompression(blob, {
+      maxSizeMB: 0.33,
+      maxWidthOrHeight: 400,
+      useWebWorker: true,
+    })
+    const storageRef = await this.$fire.storage.ref().child(path)
+    await storageRef.put(blob)
+    const urlRet = await storageRef.getDownloadURL()
+    return { imagePath: path, url: urlRet }
+  } catch (error) {
+    // eslint-disable-next-line
+      console.error('Error in the image handling ', error)
+  }
 }
 
 function deleteFileOnStorage(path) {

store/collections.js

@@ -9,7 +9,6 @@ import {
   uploadURLToStorage,
   deleteFileOnStorage,
 } from '@/plugins/api-helpers'
-export const strict = false
 
 export const state = () => ({
   myCollections: [],
@@ -80,7 +79,7 @@ export const actions = {
         index = item.collections.indexOf(collection.params.titleBefore)
         if (index !== -1) {
           item.collections.splice(index, 1, collection.title)
-          await vuexContext.dispatch('cards/rewriteCard', item, { root: true })
+          vuexContext.dispatch('cards/rewriteCard', item, { root: true })
         }
       }
       delete collection.params
@@ -165,8 +164,10 @@ export const actions = {
       return collection
     }
   },
-  async test(vuexContext) {
-    await vuexContext.dispatch('auth/setLogoutTimer', 15000, { root: true })
+  async test(vuexContext, collection) {
+    const imageUploaded = await uploadURLToStorage.call(this, collection.image)
+    // eslint-disable-next-line
+    console.log(imageUploaded)
   },
 }