imagekit as image upload fallback

.env.example

@@ -1,4 +1,7 @@
 FILE_UPLOAD_SERVICE=
+IMAGEKIT_ENDPOINT=
+IMAGEKIT_PUBLIC_KEY=
+IMAGEKIT_PRIVATE_KEY=
 LINK_PREVIEW_SERVICE=
 RPC_CUSTOM=
 SPHERON_BUCKET_NAME=

README.md

@@ -68,6 +68,18 @@ SPHERON_STORAGE_TOKEN=
 
 Image uploads via Spheron work only if you have Netlify/Vercel background functions enabled (see `netlify/functions/imageUploader.js`).
 
+## Image upload fallback
+
+It is recommended to use ImageKit as the fallback option, in case Spheron has technical issues.
+
+For this to work, create an account at [ImageKit.io](https://imagekit.io/) and add these environment variables to your project:
+
+```bash
+IMAGEKIT_ENDPOINT=
+IMAGEKIT_PUBLIC_KEY=
+IMAGEKIT_PRIVATE_KEY=
+```
+
 ## Customize
 
 - Project-specific settings in `nuxt.config.ts`

api/imageUploaderFallback.js

@@ -0,0 +1,18 @@
+const ImageKit = require("imagekit");
+
+export default async function handler(request, response) {
+  try {
+    const imagekit = new ImageKit({
+      urlEndpoint: process.env.IMAGEKIT_ENDPOINT,
+      publicKey: process.env.IMAGEKIT_PUBLIC_KEY,
+      privateKey: process.env.IMAGEKIT_PRIVATE_KEY
+    })
+
+    return response.status(200).json({
+      data: imagekit.getAuthenticationParameters()
+    });
+  } catch (error) {
+    console.error(error);
+    next(error);
+  }
+}

components/storage/FileUploadInput.vue

@@ -23,6 +23,7 @@
 
 <script>
 import { upload } from "@spheron/browser-upload";
+import ImageKit from "imagekit-javascript";
 
 export default {
   name: "FileUploadInput",
@@ -53,6 +54,37 @@ export default {
   },
 
   methods: {
+    async fallbackUpload() {
+      const thisAppUrl = window.location.origin;
+      const fetcherService = thisAppUrl + "/.netlify/functions/imageUploaderFallback";
+
+      const resp = await $fetch(fetcherService).catch((error) => error.data);
+
+      let authParams = resp;
+
+      if (typeof(resp) === "string") {
+        authParams = JSON.parse(resp);
+      }
+
+      const imagekit = new ImageKit({
+        publicKey: this.$config.imagekitPublicKey,
+        urlEndpoint: this.$config.imagekitEndpoint,
+      });
+
+      const result = await imagekit.upload({
+        file: this.file,
+        fileName: this.newFileName,
+        tags: [this.$config.projectName, this.$config.projectUrl],
+        token: authParams.data.token,
+        signature: authParams.data.signature,
+        expire: authParams.data.expire,
+      });
+
+      this.$emit("processUploadedFileUrl", result.url);
+      
+      this.waitingUpload = false;
+    },
+
     async fetchUploadToken() {
       const thisAppUrl = window.location.origin;
 
@@ -76,7 +108,7 @@ export default {
 
           if (response?.error) {
             console.log("Error fetching upload token: ", response["error"]);
-            return;
+            throw response["error"];
           }
 
           if (response?.data) {
@@ -85,6 +117,7 @@ export default {
           
         } catch (e) {
           console.log("Error fetching a file upload token: ", e);
+          throw e;
         }
       }
     },
@@ -116,20 +149,25 @@ export default {
 
     async uploadFile() {
       this.waitingUpload = true;
+      
+      try {
+        // get session token
+        await this.fetchUploadToken();
 
-      // get session token
-      await this.fetchUploadToken();
+        if (this.uploadToken) {
+          const token = this.uploadToken;
 
-      if (this.uploadToken) {
-        const token = this.uploadToken;
+          const { protocolLink, cid } = await upload([this.file], { token });
 
-        const { protocolLink, cid } = await upload([this.file], { token });
+          //const fullFileUrl = protocolLink + "/" + this.newFileName;
+          const fullFileUrl = this.$config.ipfsGateway + cid + "/" + this.newFileName;
 
-        //const fullFileUrl = protocolLink + "/" + this.newFileName;
-        const fullFileUrl = this.$config.ipfsGateway + cid + "/" + this.newFileName;
-
-        // emit file url
-        this.$emit("processUploadedFileUrl", fullFileUrl);
+          // emit file url
+          this.$emit("processUploadedFileUrl", fullFileUrl);
+        }
+      } catch (e) {
+        console.log("Error uploading file. Switching to fallback upload method.");
+        await this.fallbackUpload();
       }
 
       this.waitingUpload = false;

netlify/functions/imageUploaderFallback.js

@@ -0,0 +1,19 @@
+const ImageKit = require("imagekit");
+
+exports.handler = async function (event, context) {
+  try {
+    const imagekit = new ImageKit({
+      urlEndpoint: process.env.IMAGEKIT_ENDPOINT,
+      publicKey: process.env.IMAGEKIT_PUBLIC_KEY,
+      privateKey: process.env.IMAGEKIT_PRIVATE_KEY
+    })
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ data: imagekit.getAuthenticationParameters() }),
+    };
+  } catch (error) {
+    console.error(error);
+    next(error);
+  }
+}

nuxt.config.ts

@@ -67,6 +67,8 @@ export default defineNuxtConfig({
       iggyPostAddress: "0x5e54CebB2612744cB56547bC7CC41466ad7ac557",
       iggyPostMinterAddress: "0x2F103ec022a1d99291077a082b2DC24C734E58A3",
       iggyPostEnumerationAddress: "0xabf9960132818049340253C3Ca0551F92Db856d7",
+      imagekitEndpoint: process.env.IMAGEKIT_ENDPOINT,
+      imagekitPublicKey: process.env.IMAGEKIT_PUBLIC_KEY,
       ipfsGateway: "https://cloudflare-ipfs.com/ipfs/",
       keysAddress: "0x7058413D002B36486465FF8628bBcCE080e6Af87", // PunkKey contract address 
       keysContext: "kjzl6cwe1jw1470yqtxwcv6787md81via98w2grf8c404vcaop91h5g6q08uizx",

package.json

@@ -17,6 +17,8 @@
     "@vueuse/nuxt": "^9.2.0",
     "emoji-mart-vue-fast": "^15.0.0",
     "ethers": "^5.7.2",
+    "imagekit": "^4.1.4",
+    "imagekit-javascript": "^2.0.0",
     "metascraper": "^5.36.0",
     "metascraper-description": "^5.36.0",
     "metascraper-image": "^5.36.0",