feat(nc-gui): bring rename attachment before upload

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

@@ -88,7 +88,8 @@ 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) => {
+                  if (isImage(renamedFile.name, (<any>renamedFile).mimetype ?? renamedFile.type)) {
                     const reader = new FileReader()
 
                     reader.onload = (e) => {
@@ -105,6 +106,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
                   } else {
                     resolve(res)
                   }
+                })
               }),
           ),
         )
@@ -116,7 +118,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
       const newAttachments = []
 
-      for (const file of selectedFiles) {
+      for (let file of selectedFiles) {
         // verify mime type
         const attachmentMeta = typeof column.value?.meta === 'string' ? JSON.parse(column.value.meta) : column.value?.meta
         if (attachmentMeta.unsupportedAttachmentMimeTypes.includes(file.type)) {
@@ -124,6 +126,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
           continue
         }
 
+        file = await renameFile(file)
+
         try {
           const data = await api.storage.upload(
             {
@@ -143,19 +147,23 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       updateModelValue(JSON.stringify([...attachments.value, ...newAttachments]))
     }
 
-    async function renameFile(file: Record<string, any>) {
+    async function renameFile(file: File) {
-      return new Promise((resolve) => {
+      return new Promise<File>((resolve) => {
         const { close } = useDialog(RenameFile, {
-          fileName: file.title,
+          fileName: file.name,
           fileNames: [...attachments.value.map((file) => file.title), ...storedFiles.value.map((file) => file.title)],
           onRename: (newName: string) => {
             close()
-            // TODO: update name
+            resolve(
-            resolve(true)
+              new File([file], newName, {
+                type: file.type,
+                lastModified: file.lastModified,
+              }),
+            )
           },
           onCancel: () => {
             close()
-            resolve(true)
+            resolve(file)
           },
         })
       })