fix: space image upload (#9844)

* fix: space image upload
owncloud · Dec 13, 2023 · f0b32dc · f0b32dc
1 parent d938a68
commit f0b32dc
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 47 deletions.
diff --git a/changelog/unreleased/bugfix-space-image b/changelog/unreleased/bugfix-space-image
@@ -0,0 +1,6 @@
+Bugfix: Upload space image
+
+Space image upload failed due to some code changes, this fixed and works as expected again.
+
+https://github.com/owncloud/web/pull/9844
+https://github.com/owncloud/web/issues/9839
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
@@ -1,6 +1,6 @@
 import { computed, unref, VNodeRef } from 'vue'
 import { Store } from 'vuex'
-import { Resource, SpaceResource } from '@ownclouders/web-client/src'
+import { SpaceResource } from '@ownclouders/web-client/src'
 import { Drive } from '@ownclouders/web-client/src/generated'
 import {
   useClientService,
@@ -51,13 +51,6 @@ export const useSpaceActionsUploadImage = ({
       })
     }
 
-    const extraHeaders = {}
-    if (file.lastModifiedDate) {
-      extraHeaders['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000
-    } else if (file.lastModified) {
-      extraHeaders['X-OC-Mtime'] = '' + file.lastModified / 1000
-    }
-
     try {
       await clientService.webdav.getFileInfo(selectedSpace, { path: '.space' })
     } catch (_) {
@@ -68,49 +61,61 @@ export const useSpaceActionsUploadImage = ({
       })
     }
 
-    return loadingService.addTask(() => {
-      return clientService.webdav
-        .putFileContents(selectedSpace, {
+    return loadingService.addTask(async () => {
+      // overwriting the content-type header only works if the provided content is not of type object,
+      // therefore it has to be converted to a ArrayBuffer which allows the overwrite.
+      //
+      // https://github.com/perry-mitchell/webdav-client/blob/dd8d0dcc319297edc70077abd74b935361bc2412/source/tools/body.ts#L18
+      const content = await file.arrayBuffer()
+      const headers = {
+        'Content-Type': 'application/offset+octet-stream'
+      }
+
+      if (file.lastModifiedDate) {
+        headers['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000
+      } else if (file.lastModified) {
+        headers['X-OC-Mtime'] = '' + file.lastModified / 1000
+      }
+
+      try {
+        const { fileId } = await clientService.webdav.putFileContents(selectedSpace, {
           path: `/.space/${file.name}`,
-          content: file,
-          headers: extraHeaders,
+          content,
+          headers,
           overwrite: true
         })
-        .then(({ fileId }: Resource) => {
-          return graphClient.drives
-            .updateDrive(
-              selectedSpace.id.toString(),
+
+        const { data } = await graphClient.drives.updateDrive(
+          selectedSpace.id.toString(),
+          {
+            special: [
               {
-                special: [
-                  {
-                    specialFolder: {
-                      name: 'image'
-                    },
-                    id: fileId
-                  }
-                ]
-              } as Drive,
-              {}
-            )
-            .then(({ data }) => {
-              store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
-                id: selectedSpace.id.toString(),
-                field: 'spaceImageData',
-                value: data.special.find((special) => special.specialFolder.name === 'image')
-              })
-              store.dispatch('showMessage', {
-                title: $gettext('Space image was uploaded successfully')
-              })
-              eventBus.publish('app.files.list.load')
-            })
+                specialFolder: {
+                  name: 'image'
+                },
+                id: fileId
+              }
+            ]
+          } as Drive,
+          {}
+        )
+
+        store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
+          id: selectedSpace.id.toString(),
+          field: 'spaceImageData',
+          value: data.special.find((special) => special.specialFolder.name === 'image')
+        })
+        await store.dispatch('showMessage', {
+          title: $gettext('Space image was uploaded successfully')
         })
-        .catch((error) => {
-          console.error(error)
-          store.dispatch('showErrorMessage', {
-            title: $gettext('Failed to upload space image'),
-            error
-          })
+        eventBus.publish('app.files.list.load')
+      } catch (error) {
+        console.error(error)
+        await store.dispatch('showErrorMessage', {
+          title: $gettext('Failed to upload space image'),
+          error
         })
+      }
     })
   }
 

diff --git a/...es/web-app-files/tests/unit/composables/actions/spaces/useSpaceActionsUploadImage.spec.ts b/...es/web-app-files/tests/unit/composables/actions/spaces/useSpaceActionsUploadImage.spec.ts
@@ -28,9 +28,17 @@ describe('uploadImage', () => {
                 'YTE0ODkwNGItNTZhNy00NTQ4LTk2N2MtZjcwZjhhYTY0Y2FjOmQ4YzMzMmRiLWUxNWUtNDRjMy05NGM2LTViYjQ2MGMwMWJhMw=='
             })
           )
+
           await uploadImageSpace({
             currentTarget: {
-              files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }]
+              files: [
+                {
+                  name: 'image.png',
+                  lastModifiedDate: new Date(),
+                  type: 'image/png',
+                  arrayBuffer: () => new ArrayBuffer(0)
+                }
+              ]
             }
           })
 
@@ -47,7 +55,14 @@ describe('uploadImage', () => {
 
           await uploadImageSpace({
             currentTarget: {
-              files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }]
+              files: [
+                {
+                  name: 'image.png',
+                  lastModifiedDate: new Date(),
+                  type: 'image/png',
+                  arrayBuffer: () => new ArrayBuffer(0)
+                }
+              ]
             }
           })
 

diff --git a/tests/e2e/support/objects/app-files/spaces/actions.ts b/tests/e2e/support/objects/app-files/spaces/actions.ts
@@ -253,6 +253,12 @@ export const changeSpaceImage = async (args: {
         resp.status() === 207 &&
         resp.request().method() === 'PROPFIND'
     ),
+    page.waitForResponse(
+      (resp) =>
+        resp.url().includes(resource.name) &&
+        resp.status() === 200 &&
+        resp.request().method() === 'GET'
+    ),
     fileChooser.setFiles(resource.path)
   ])