feat: use new attachment api

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editableCell/EditableAttachmentCell.vue

@@ -27,7 +27,7 @@
           <v-tooltip bottom>
             <template #activator="{on}">
               <v-img
-                v-if="isImage(item.title)"
+                v-if="isImage(item.title, item.mimetype)"
                 lazy-src="https://via.placeholder.com/60.png?text=Loading..."
                 alt="#"
                 max-height="99px"
@@ -150,7 +150,7 @@
                     </v-icon>
                     <div class="pa-2 d-flex align-center" style="height:200px">
                       <img
-                        v-if="isImage(item.title)"
+                        v-if="isImage(item.title, item.mimetype)"
                         style="max-height: 100%;max-width: 100%"
                         alt="#"
                         :src="item.url || item.data"
@@ -195,7 +195,7 @@
                 </p>
                 <div style="width:90vh;height:calc(100vh - 150px)" class="d-flex align-center justify-center">
                   <img
-                    v-if="isImage(item.title)"
+                    v-if="isImage(item.title, item.mimetype)"
                     style="max-width:90vh;max-height:calc(100vh - 100px)"
                     :src="item.url || item.data"
                   >
@@ -234,7 +234,7 @@
                 @click="carousel = i"
               >
                 <img
-                  v-if="isImage(item.title)"
+                  v-if="isImage(item.title, item.mimetype)"
                   style="max-width:100%;max-height:100%"
                   :src="item.url || item.data"
                 >
@@ -341,7 +341,7 @@ export default {
       if (this.isPublicForm) {
         this.localFilesState.push(...Array.from(this.$refs.file.files).map((file) => {
           const res = { file, title: file.name }
-          if (isImage(file.name)) {
+          if (isImage(file.name, file.mimetype)) {
             const reader = new FileReader()
             reader.onload = (e) => {
               this.$set(res, 'data', e.target.result)

packages/nc-gui/components/project/spreadsheet/helpers/imageExt.js

@@ -12,8 +12,8 @@ const imageExt = [
 
 export default imageExt
 
-const isImage = (name) => {
-  return imageExt.some(e => name.toLowerCase().endsWith(`.${e}`))
+const isImage = (name, type) => {
+  return imageExt.some(e => name.toLowerCase().endsWith(`.${e}`)) || (type || '').startsWith('image/')
 }
 
 export { isImage }

packages/nocodb/src/lib/noco/meta/api/sync/helpers/job.ts

@@ -2,11 +2,9 @@ import FetchAT from './fetchAT';
 import { UITypes } from 'nocodb-sdk';
 import { Tele } from 'nc-help';
 // import * as sMap from './syncMap';
-import FormData from 'form-data';
 
 import { Api } from 'nocodb-sdk';
 
-import axios from 'axios';
 import Airtable from 'airtable';
 import jsonfile from 'jsonfile';
 import hash from 'object-hash';
@@ -1368,49 +1366,66 @@ export default async (
         case UITypes.Attachment:
           if (!syncDB.options.syncAttachment) rec[key] = null;
           else {
-            const tempArr = [];
-            for (const v of value) {
-              const binaryImage = await axios
-                .get(v.url, {
-                  responseType: 'stream',
-                  headers: {
-                    'Content-Type': v.type
-                  }
-                })
-                .then(response => {
-                  return response.data;
-                })
-                .catch(error => {
-                  console.log(error);
-                  return false;
-                });
-
-              const imageFile: any = new FormData();
-              imageFile.append('files', binaryImage, {
-                filename: v.filename.includes('?')
-                  ? v.filename.split('?')[0]
-                  : v.filename
-              });
+            let tempArr = [];
+            // for (const v of value) {
+            //   const binaryImage = await axios
+            //     .get(v.url, {
+            //       responseType: 'stream',
+            //       headers: {
+            //         'Content-Type': v.type
+            //       }
+            //     })
+            //     .then(response => {
+            //       return response.data;
+            //     })
+            //     .catch(error => {
+            //       console.log(error);
+            //       return false;
+            //     });
+            //
+            //   const imageFile: any = new FormData();
+            //   imageFile.append('files', binaryImage, {
+            //     filename: v.filename.includes('?')
+            //       ? v.filename.split('?')[0]
+            //       : v.filename
+            //   });
+            //
+            //   const rs = await axios
+            //     .post(sDB.baseURL + '/api/v1/db/storage/upload', imageFile, {
+            //       params: {
+            //         path: `noco/${sDB.projectName}/${table.title}/${key}`
+            //       },
+            //       headers: {
+            //         'Content-Type': `multipart/form-data; boundary=${imageFile._boundary}`,
+            //         'xc-auth': sDB.authToken
+            //       }
+            //     })
+            //     .then(response => {
+            //       return response.data;
+            //     })
+            //     .catch(e => {
+            //       console.log(e);
+            //     });
+            //
+            //   tempArr.push(...(rs || []));
+            // }
 
-              const rs = await axios
-                .post(sDB.baseURL + '/api/v1/db/storage/upload', imageFile, {
-                  params: {
+            try {
+              tempArr = await api.storage.uploadByUrl(
+                {
                   path: `noco/${sDB.projectName}/${table.title}/${key}`
                 },
-                  headers: {
-                    'Content-Type': `multipart/form-data; boundary=${imageFile._boundary}`,
-                    'xc-auth': sDB.authToken
-                  }
-                })
-                .then(response => {
-                  return response.data;
-                })
-                .catch(e => {
+                value?.map(attachment => ({
+                  fileName: attachment.filename,
+                  url: attachment.url,
+                  size: attachment.size,
+                  mimetype: attachment.type
+                }))
+              );
+            } catch (e) {
               console.log(e);
-                });
-
-              tempArr.push(...(rs || []));
             }
+
             rec[key] = JSON.stringify(tempArr);
           }
           break;