Fix Attachments spinner

Signed-off-by: Anna No <anna.no@xored.com>

plugins/attachment-resources/src/components/AddAttachment.svelte

@@ -2,7 +2,7 @@
   import { Class, Doc, Ref, Space } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { CircleButton, IconAdd } from '@anticrm/ui'
-  import { createAttachment } from '../utils'
+  import { createAttachments } from '../utils'
 
   export let loading: number = 0
   export let inputFile: HTMLInputElement
@@ -10,16 +10,18 @@
   export let objectClass: Ref<Class<Doc>>
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
-  
 
   const client = getClient()
 
-  function fileSelected() {
+  async function fileSelected() {
     const list = inputFile.files
     if (list === null || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+
+    loading++
+    try {
+      await createAttachments(client, list, {objectClass, objectId, space})
+    } finally {
+      loading--
     }
   }
 
@@ -31,13 +33,9 @@
 
 <div>
   {#if $$slots.control}
-    <slot name="control" click={openFile}/>
+    <slot name="control" click={openFile} />
   {:else}
-    <CircleButton
-      icon={IconAdd}
-      size="small"
-      selected
-      on:click={openFile} />
+    <CircleButton icon={IconAdd} size="small" selected on:click={openFile} />
   {/if}
   <input
     bind:this={inputFile}

plugins/attachment-resources/src/components/AttachmentDroppable.svelte

@@ -17,25 +17,28 @@
   import { Class, Doc, Ref, Space } from '@anticrm/core'
 
   import { getClient } from '@anticrm/presentation'
-  import { createAttachment } from '../utils'
+  import { createAttachments } from '../utils'
 
   export let loading: number = 0
   export let objectClass: Ref<Class<Doc>>
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
   export let canDrop: ((e: DragEvent) => boolean) | undefined = undefined
-  
+
   export let dragover = false
 
   const client = getClient()
-  
-  function fileDrop(e: DragEvent) {
+
+  async function fileDrop(e: DragEvent) {
     dragover = false
     const list = e.dataTransfer?.files
     if (list === undefined || list.length === 0) return
-    for (let index = 0; index < list.length; index++) {
-      const file = list.item(index)
-      if (file !== null) createAttachment(client, file, loading, { objectClass, objectId, space })
+
+    loading++
+    try {
+      await createAttachments(client, list, {objectClass, objectId, space})
+    } finally {
+      loading--
     }
   }
 

plugins/attachment-resources/src/utils.ts

@@ -14,13 +14,13 @@
 // limitations under the License.
 //
 
-import type { Class, Doc, Ref, Space,  TxOperations as Client } from '@anticrm/core'
+import type { Class, Doc, Ref, Space, TxOperations as Client } from '@anticrm/core'
 import login from '@anticrm/login'
 import { getMetadata, setPlatformStatus, unknownError } from '@anticrm/platform'
 
 import attachment from './plugin'
 
-export async function uploadFile (file: File, opts?: { space: Ref<Space>, attachedTo: Ref<Doc> }): Promise<string> {
+export async function uploadFile(file: File, opts?: { space: Ref<Space>; attachedTo: Ref<Doc> }): Promise<string> {
   const uploadUrl = getMetadata(login.metadata.UploadUrl)
 
   if (uploadUrl === undefined) {
@@ -30,12 +30,16 @@ export async function uploadFile (file: File, opts?: { space: Ref<Space>, attach
   const data = new FormData()
   data.append('file', file)
 
-  const params = opts !== undefined
-    ? [['space', opts.space], ['attachedTo', opts.attachedTo]]
-        .filter((x): x is [string, Ref<any>] => x[1] !== undefined)
-        .map(([name, value]) => `${name}=${value}`)
-        .join('&')
-    : ''
+  const params =
+    opts !== undefined
+      ? [
+          ['space', opts.space],
+          ['attachedTo', opts.attachedTo]
+        ]
+          .filter((x): x is [string, Ref<any>] => x[1] !== undefined)
+          .map(([name, value]) => `${name}=${value}`)
+          .join('&')
+      : ''
   const suffix = params === '' ? params : `?${params}`
 
   const url = `${uploadUrl}${suffix}`
@@ -54,7 +58,7 @@ export async function uploadFile (file: File, opts?: { space: Ref<Space>, attach
   return await resp.text()
 }
 
-export async function deleteFile (id: string): Promise<void> {
+export async function deleteFile(id: string): Promise<void> {
   const uploadUrl = getMetadata(login.metadata.UploadUrl)
 
   const url = `${uploadUrl as string}?file=${id}`
@@ -70,27 +74,33 @@ export async function deleteFile (id: string): Promise<void> {
   }
 }
 
-export async function createAttachment (client: Client, file: File, loading: number, attachTo: {objectClass: Ref<Class<Doc>>, space: Ref<Space>, objectId: Ref<Doc>}) {
-  loading++
-  const {objectClass, objectId, space} = attachTo
+export async function createAttachments(
+  client: Client,
+  list: FileList,
+  attachTo: { objectClass: Ref<Class<Doc>>; space: Ref<Space>; objectId: Ref<Doc> }
+) {
+  const { objectClass, objectId, space } = attachTo
   try {
-    const uuid = await uploadFile(file, { space, attachedTo: objectId })
-    console.log('uploaded file uuid', uuid)
-    client.addCollection(attachment.class.Attachment, space, objectId, objectClass, 'attachments', {
-      name: file.name,
-      file: uuid,
-      type: file.type,
-      size: file.size,
-      lastModified: file.lastModified
-    })
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) {
+        const uuid = await uploadFile(file, { space, attachedTo: objectId })
+        console.log('uploaded file uuid', uuid)
+        client.addCollection(attachment.class.Attachment, space, objectId, objectClass, 'attachments', {
+          name: file.name,
+          file: uuid,
+          type: file.type,
+          size: file.size,
+          lastModified: file.lastModified
+        })
+      }
+    }
   } catch (err: any) {
     setPlatformStatus(unknownError(err))
-  } finally {
-    loading--
   }
 }
 
-export function getType (type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
+export function getType(type: string): 'image' | 'video' | 'audio' | 'pdf' | 'other' {
   if (type.startsWith('image/')) {
     return 'image'
   }