feat(nc-gui): attachment rename file logic

packages/nc-gui/components/cell/attachment/utils.ts

@@ -1,3 +1,4 @@
+import RenameFile from './RenameFile.vue'
 import {
   ColumnInj,
   EditModeInj,
@@ -48,7 +49,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     /** keep user selected File object */
     const storedFiles = ref<AttachmentProps[]>([])
 
-    const attachments = ref<File[]>([])
+    const attachments = ref<AttachmentProps[]>([])
 
     const modalVisible = ref(false)
 
@@ -87,23 +88,24 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
               new Promise<AttachmentProps>((resolve) => {
                 const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type }
 
-                if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
+                renameFile(file).then((renamedFile) => {
-                  const reader = new FileReader()
+                  if (isImage(renamedFile.name, (<any>renamedFile).mimetype ?? renamedFile.type)) {
+                    const reader = new FileReader()
 
-                  reader.onload = (e) => {
+                    reader.onload = (e) => {
-                    res.data = e.target?.result
+                      res.data = e.target?.result
+                      resolve(res)
+                    }
 
-                    resolve(res)
+                    reader.onerror = () => {
-                  }
+                      resolve(res)
+                    }
 
-                  reader.onerror = () => {
+                    reader.readAsDataURL(file)
+                  } else {
                     resolve(res)
                   }
-
+                })
-                  reader.readAsDataURL(file)
-                } else {
-                  resolve(res)
-                }
               }),
           ),
         )
@@ -115,7 +117,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
       const newAttachments = []
 
-      for (const file of selectedFiles) {
+      for (let file of selectedFiles) {
+        file = await renameFile(file)
         try {
           const data = await api.storage.upload(
             {
@@ -136,6 +139,28 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       updateModelValue(JSON.stringify([...attachments.value, ...newAttachments]))
     }
 
+    async function renameFile(file: File) {
+      return new Promise<File>((resolve) => {
+        const { close } = useDialog(RenameFile, {
+          fileName: file.name,
+          fileNames: [...attachments.value.map((file) => file.title), ...storedFiles.value.map((file) => file.title)],
+          onRename: (newName: string) => {
+            close()
+            resolve(
+              new File([file], newName, {
+                type: file.type,
+                lastModified: file.lastModified,
+              }),
+            )
+          },
+          onCancel: () => {
+            close()
+            resolve(file)
+          },
+        })
+      })
+    }
+
     /** save files on drop */
     async function onDrop(droppedFiles: File[] | null) {
       if (droppedFiles) {