From de6a34975a43d72953898aeb46d1a4c7cc5a6e47 Mon Sep 17 00:00:00 2001 From: David Schwarz <118435139+VP-DS@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:53:04 +0100 Subject: [PATCH] Enable setting import source per file in admin upload from external source (#2916) Co-authored-by: Thomas Dax Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com> --- .changeset/long-files-compile.md | 5 +++++ demo/admin/src/dam/ImportFromPicsum.tsx | 4 ---- demo/admin/src/dam/getRandomPicsumImage.ts | 10 +++++++-- .../DataGrid/fileUpload/useDamFileUpload.tsx | 13 +++++++---- .../admin/cms-admin/src/form/file/upload.ts | 22 ++++++++++++------- packages/admin/cms-admin/src/index.ts | 1 + 6 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 .changeset/long-files-compile.md diff --git a/.changeset/long-files-compile.md b/.changeset/long-files-compile.md new file mode 100644 index 0000000000..fc43daf736 --- /dev/null +++ b/.changeset/long-files-compile.md @@ -0,0 +1,5 @@ +--- +"@comet/cms-admin": patch +--- + +Enable setting `importSourceId` and `importSourceType` for each individual file in the `useDamFileUpload#uploadFiles` function diff --git a/demo/admin/src/dam/ImportFromPicsum.tsx b/demo/admin/src/dam/ImportFromPicsum.tsx index 80f0e8da77..161a3747cb 100644 --- a/demo/admin/src/dam/ImportFromPicsum.tsx +++ b/demo/admin/src/dam/ImportFromPicsum.tsx @@ -34,10 +34,6 @@ export const ImportFromPicsum = () => { { acceptedFiles: [picsumImage.file], fileRejections: [] }, { folderId, - importSource: { - importSourceId: picsumImage.url, - importSourceType: "picsum", - }, }, ); handleCloseDialog(); diff --git a/demo/admin/src/dam/getRandomPicsumImage.ts b/demo/admin/src/dam/getRandomPicsumImage.ts index edcee57ec7..baa08715b6 100644 --- a/demo/admin/src/dam/getRandomPicsumImage.ts +++ b/demo/admin/src/dam/getRandomPicsumImage.ts @@ -1,5 +1,7 @@ +import { FileWithDamUploadMetadata } from "@comet/cms-admin"; + export interface PicsumImage { - file: File; + file: FileWithDamUploadMetadata; url: string; } @@ -35,7 +37,11 @@ export async function getRandomPicsumImage(): Promise { } const fileName = extractFileNameFromUrl(image.origin); - const acceptedFile = new File([image.blob], fileName, { type: mimeType }); + const acceptedFile: FileWithDamUploadMetadata = new File([image.blob], fileName, { type: mimeType }); + acceptedFile.importSource = { + importSourceId: image.origin, + importSourceType: "picsum", + }; return { file: acceptedFile, diff --git a/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx b/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx index a0c15607ad..7b589d31af 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/fileUpload/useDamFileUpload.tsx @@ -31,14 +31,15 @@ import { GQLDamFolderForFolderUploadMutationVariables, } from "./useDamFileUpload.gql.generated"; -interface FileWithCustomMetaData extends File { +export interface FileWithDamUploadMetadata extends File { path?: string; license?: GQLLicenseInput; title?: string; altText?: string; + importSource?: ImportSource; } -export interface FileWithFolderPath extends FileWithCustomMetaData { +export interface FileWithFolderPath extends FileWithDamUploadMetadata { folderPath?: string; } @@ -47,7 +48,7 @@ interface UploadDamFileOptions { } interface Files { - acceptedFiles: FileWithCustomMetaData[]; + acceptedFiles: FileWithDamUploadMetadata[]; fileRejections: FileRejection[]; } @@ -55,6 +56,9 @@ type ImportSource = { importSourceType: never; importSourceId: never } | { impor interface UploadFilesOptions { folderId?: string; + /** + * @deprecated Set `importSource` directly on the file + */ importSource?: ImportSource; } @@ -83,7 +87,7 @@ interface RejectedFile { file: File; } -const addFolderPathToFiles = async (acceptedFiles: FileWithCustomMetaData[]): Promise => { +const addFolderPathToFiles = async (acceptedFiles: FileWithDamUploadMetadata[]): Promise => { const newFiles = []; for (const file of acceptedFiles) { @@ -110,6 +114,7 @@ const addFolderPathToFiles = async (acceptedFiles: FileWithCustomMetaData[]): Pr newFile.license = file.license; newFile.title = file.title; newFile.altText = file.altText; + newFile.importSource = file.importSource; const folderPath = harmonizedPath?.split("/").slice(0, -1).join("/"); newFile.folderPath = folderPath && folderPath?.length > 0 ? folderPath : undefined; diff --git a/packages/admin/cms-admin/src/form/file/upload.ts b/packages/admin/cms-admin/src/form/file/upload.ts index 252d778e13..8c4560cd64 100644 --- a/packages/admin/cms-admin/src/form/file/upload.ts +++ b/packages/admin/cms-admin/src/form/file/upload.ts @@ -3,10 +3,17 @@ import { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelToken } from "a import { GQLUpdateDamFileInput } from "../../graphql.generated"; interface UploadFileData { - file: File & Pick; + file: File & + Pick & { importSource?: { importSourceType: string; importSourceId: string } }; scope: Record; folderId?: string; + /** + * @deprecated Set `file.importSource.importSourceId` instead + */ importSourceId?: string; + /** + * @deprecated Set `file.importSource.importSourceType` instead + */ importSourceType?: string; } @@ -35,10 +42,15 @@ function uploadOrReplaceByFilenameAndFolder({ const formData = new FormData(); formData.append("file", data.file); formData.append("scope", JSON.stringify(data.scope)); - if (data.importSourceId && data.importSourceType) { + + if (data.importSourceId && data.importSourceType && !data.file.importSource) { formData.append("importSourceId", data.importSourceId); formData.append("importSourceType", data.importSourceType); } + if (data.file.importSource) { + formData.append("importSourceId", data.file.importSource.importSourceId); + formData.append("importSourceType", data.file.importSource.importSourceType); + } if (data.file.license) { formData.append("license", JSON.stringify(data.file.license)); } @@ -66,8 +78,6 @@ function uploadOrReplaceByFilenameAndFolder({ interface ReplaceFileByIdData { file: File & Pick; fileId: string; - importSourceId?: string; - importSourceType?: string; } export function replaceById({ @@ -79,10 +89,6 @@ export function replaceById({ const formData = new FormData(); formData.append("file", data.file); formData.append("fileId", data.fileId); - if (data.importSourceId && data.importSourceType) { - formData.append("importSourceId", data.importSourceId); - formData.append("importSourceType", data.importSourceType); - } if (data.file.license) { formData.append("license", JSON.stringify(data.file.license)); } diff --git a/packages/admin/cms-admin/src/index.ts b/packages/admin/cms-admin/src/index.ts index 2eb7b5d040..8deb67a6f8 100644 --- a/packages/admin/cms-admin/src/index.ts +++ b/packages/admin/cms-admin/src/index.ts @@ -56,6 +56,7 @@ export { useDamAcceptedMimeTypes } from "./dam/config/useDamAcceptedMimeTypes"; export { useDamConfig } from "./dam/config/useDamConfig"; export { useCurrentDamFolder } from "./dam/CurrentDamFolderProvider"; export { DamPage } from "./dam/DamPage"; +export type { FileWithDamUploadMetadata } from "./dam/DataGrid/fileUpload/useDamFileUpload"; export { useDamFileUpload } from "./dam/DataGrid/fileUpload/useDamFileUpload"; export { createDamFileDependency } from "./dam/dependencies/createDamFileDependency"; export { DashboardHeader, DashboardHeaderProps } from "./dashboard/DashboardHeader";