fallback image uploader renamed to image kit uploader

iggy-social · Sep 15, 2024 · ca26701 · ca26701
1 parent c215f44
commit ca26701
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -90,7 +90,7 @@ ARWEAVE_ADDRESS=
 
 Also make sure these variables are set on your hosting provider (Netlify, Vercel, etc).
 
-## Image upload fallback
+## ImageKit upload
 
 It is recommended to use ImageKit as the fallback option, in case Arweave has technical issues.
 
@@ -102,6 +102,8 @@ IMAGEKIT_PUBLIC_KEY=
 IMAGEKIT_PRIVATE_KEY=
 ```
 
+You can also use ImageKit as your main image upload, if you set the `fileUploadStorageType` variable in nuxt config to "imagekit".
+
 ## Customize
 
 - Project-specific settings in `nuxt.config.ts`

diff --git a/api/imageUploaderFallback.js → api/imageKitUploader.js b/api/imageUploaderFallback.js → api/imageKitUploader.js
diff --git a/components/chat/ChatFeed.vue b/components/chat/ChatFeed.vue
@@ -59,7 +59,7 @@
               @processFileUrl="insertImage"
               title="Upload image"
               infoText="Upload an image."
-              storageType="arweave"
+              :storageType="$config.fileUploadStorageType"
               :componentId="$.uid"
               :maxFileSize="$config.fileUploadSizeLimit"
             />

diff --git a/components/nft/collection/AddImageToCollectionModal.vue b/components/nft/collection/AddImageToCollectionModal.vue
@@ -26,7 +26,7 @@
 
               <FileUploadInput
                 btnCls="btn btn-primary"
-                storageType="arweave"
+                :storageType="$config.fileUploadStorageType"
                 :maxFileSize="$config.fileUploadSizeLimit"
                 @processUploadedFileUrl="insertImageLink"
               />

diff --git a/components/nft/collection/ChangeCollectionPreviewModal.vue b/components/nft/collection/ChangeCollectionPreviewModal.vue
@@ -28,7 +28,7 @@
 
               <FileUploadInput
                 btnCls="btn btn-primary"
-                storageType="arweave"
+                :storageType="$config.fileUploadStorageType"
                 :maxFileSize="$config.fileUploadSizeLimit"
                 @processUploadedFileUrl="insertImageLink"
               />

diff --git a/components/profile/PunkProfile.vue b/components/profile/PunkProfile.vue
@@ -239,7 +239,7 @@
         @processFileUrl="insertImage"
         title="Change profile image"
         infoText="Upload a new profile picture."
-        storageType="arweave"
+        :storageType="$config.fileUploadStorageType"
         :componentId="$.uid"
         :maxFileSize="$config.fileUploadSizeLimit"
       />

diff --git a/components/storage/FileUploadInput.vue b/components/storage/FileUploadInput.vue
@@ -50,14 +50,51 @@ export default {
   },
 
   methods: {
+    async arweaveUpload() {
+      const thisAppUrl = window.location.origin
+
+      let fetcherService
+      if (this.$config.fileUploadTokenService === 'netlify') {
+        fetcherService = thisAppUrl + '/.netlify/functions/arweaveUploader'
+      } else if (this.$config.fileUploadTokenService === 'vercel') {
+        fetcherService = thisAppUrl + '/api/arweaveUploader'
+      }
+
+      // Convert file to base64
+      const fileData = await this.fileToBase64(this.file)
+
+      const fileType = this.file.type
+
+      const resp = await axios.post(fetcherService, {
+        fileData,
+        fileName: this.file.name,
+        fileType: this.file.type
+      })
+
+      const transactionId = resp.data.transactionId
+      let fileUri = `ar://${transactionId}`
+
+      // add file type to file uri so we can use it in the frontend
+      if (fileType.startsWith('image/')) {
+        fileUri += `?img`
+      } else if (fileType.startsWith('video/') || fileType.startsWith('audio/')) {
+        fileUri += `?${fileType}`
+      } else if (fileType.startsWith('text/plain')) {
+        fileUri += `?txt`
+      }
+
+      // emit file url
+      this.$emit('processUploadedFileUrl', fileUri)
+    },
+
     async imageKitUpload() {
       const thisAppUrl = window.location.origin
 
       let fetcherService
       if (this.$config.fileUploadTokenService === 'netlify') {
-        fetcherService = thisAppUrl + '/.netlify/functions/imageUploaderFallback'
+        fetcherService = thisAppUrl + '/.netlify/functions/imageKitUploader'
       } else if (this.$config.fileUploadTokenService === 'vercel') {
-        fetcherService = thisAppUrl + '/api/imageUploaderFallback'
+        fetcherService = thisAppUrl + '/api/imageKitUploader'
       }
 
       const resp = await $fetch(fetcherService).catch(error => error.data)
@@ -118,51 +155,21 @@ export default {
 
       if (this.storageType === 'arweave') {
         try {
-          const thisAppUrl = window.location.origin
-
-          let fetcherService
-          if (this.$config.fileUploadTokenService === 'netlify') {
-            fetcherService = thisAppUrl + '/.netlify/functions/arweaveUploader'
-          } else if (this.$config.fileUploadTokenService === 'vercel') {
-            fetcherService = thisAppUrl + '/api/arweaveUploader'
-          }
-
-          console.log(fetcherService)
-
-          // Convert file to base64
-          const fileData = await this.fileToBase64(this.file)
-
-          const fileType = this.file.type
-
-          const resp = await axios.post(fetcherService, {
-            fileData,
-            fileName: this.file.name,
-            fileType: this.file.type
-          })
-          console.log(resp)
-          
-          const transactionId = resp.data.transactionId
-          let fileUri = `ar://${transactionId}`
-
-          // add file type to file uri so we can use it in the frontend
-          if (fileType.startsWith('image/')) {
-            fileUri += `?img`
-          } else if (fileType.startsWith('video/') || fileType.startsWith('audio/')) {
-            fileUri += `?${fileType}`
-          } else if (fileType.startsWith('text/plain')) {
-            fileUri += `?txt`
-          }
-
-          // emit file url
-          this.$emit('processUploadedFileUrl', fileUri)
+          await this.arweaveUpload()
         } catch (error) {
           console.error('Error uploading file to decentralized storage service', error)
           console.log('Falling back to centralized storage service')
           await this.imageKitUpload()
         }
       } else {
-        // use centralized storage service
-        await this.imageKitUpload()
+        // use centralized storage service ImageKit
+        try {
+          await this.imageKitUpload()
+        } catch (error) {
+          console.error('Error uploading file to centralized storage service', error)
+          console.log('Falling back to decentralized storage service')
+          await this.arweaveUpload()
+        }
       }
 
       this.waitingUpload = false

diff --git a/netlify/functions/imageUploaderFallback.js → netlify/functions/imageKitUploader.js b/netlify/functions/imageUploaderFallback.js → netlify/functions/imageKitUploader.js
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -72,6 +72,7 @@ export default defineNuxtConfig({
       favicon: '/img/favicon.svg',
       fileUploadEnabled: true, // enable/disable file uploads (enable only if external file storage is used, e.g. Arweave)
       fileUploadSizeLimit: 1 * 1024 * 1024, // max file upload size in bytes (1 * 1024 * 1024 = 1 MB)
+      fileUploadStorageType: "arweave", // "arweave" or "imagekit"
       fileUploadTokenService: process.env.FILE_UPLOAD_SERVICE || 'netlify', // "netlify" or "vercel" (or leave empty for no file uploads)
       getPostsLimit: 30, // number of posts to fetch from Orbis in the getPosts() function
       governanceUrl: 'https://snapshot.org/#/sgbchat.eth', // governance url (snapshot, Tally, etc.)

diff --git a/pages/nft/create.vue b/pages/nft/create.vue
@@ -195,7 +195,7 @@
         @processFileUrl="insertImage"
         title="Upload your NFT image"
         infoText="Upload the NFT image."
-        storageType="arweave"
+        :storageType="$config.fileUploadStorageType"
         :componentId="$.uid"
         :maxFileSize="$config.fileUploadSizeLimit"
       />