From acf24cf1a0fed21c92bedfc3a3a9ea447aaacc32 Mon Sep 17 00:00:00 2001 From: Florian Schade Date: Tue, 24 Oct 2023 10:18:48 +0200 Subject: [PATCH] fix: space image upload (#9844) * fix: space image upload --- changelog/unreleased/bugfix-space-image | 6 ++ .../spaces/useSpaceActionsUploadImage.ts | 95 ++++++++++--------- .../spaces/useSpaceActionsUploadImage.spec.ts | 19 +++- .../objects/app-files/spaces/actions.ts | 6 ++ 4 files changed, 79 insertions(+), 47 deletions(-) create mode 100644 changelog/unreleased/bugfix-space-image diff --git a/changelog/unreleased/bugfix-space-image b/changelog/unreleased/bugfix-space-image new file mode 100644 index 00000000000..2ab1960ad5c --- /dev/null +++ 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 index 5ce2fe58074..3242b71e908 100644 --- 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/packages/web-app-files/tests/unit/composables/actions/spaces/useSpaceActionsUploadImage.spec.ts b/packages/web-app-files/tests/unit/composables/actions/spaces/useSpaceActionsUploadImage.spec.ts index dacbcfb7d0e..078f189eaba 100644 --- a/packages/web-app-files/tests/unit/composables/actions/spaces/useSpaceActionsUploadImage.spec.ts +++ b/packages/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 index 9d4b686a6a3..2e40588988b 100644 --- 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) ])