Enable setting import source per file in admin upload from external s…

…ource (#2916) Co-authored-by: Thomas Dax <[email protected]> Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Jan 13, 2025 · de6a349 · de6a349
1 parent b912a6b
commit de6a349
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/.changeset/long-files-compile.md 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
@@ -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
@@ -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<PicsumImage> {
         }
 
         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
@@ -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,14 +48,17 @@ interface UploadDamFileOptions {
 }
 
 interface Files {
-    acceptedFiles: FileWithCustomMetaData[];
+    acceptedFiles: FileWithDamUploadMetadata[];
     fileRejections: FileRejection[];
 }
 
 type ImportSource = { importSourceType: never; importSourceId: never } | { importSourceType: string; importSourceId: string };
 
 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<FileWithFolderPath[]> => {
+const addFolderPathToFiles = async (acceptedFiles: FileWithDamUploadMetadata[]): Promise<FileWithFolderPath[]> => {
     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
@@ -3,10 +3,17 @@ import { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelToken } from "a
 import { GQLUpdateDamFileInput } from "../../graphql.generated";
 
 interface UploadFileData {
-    file: File & Pick<GQLUpdateDamFileInput, "license" | "title" | "altText">;
+    file: File &
+        Pick<GQLUpdateDamFileInput, "license" | "title" | "altText"> & { importSource?: { importSourceType: string; importSourceId: string } };
     scope: Record<string, unknown>;
     folderId?: string;
+    /**
+     * @deprecated Set `file.importSource.importSourceId` instead
+     */
     importSourceId?: string;
+    /**
+     * @deprecated Set `file.importSource.importSourceType` instead
+     */
     importSourceType?: string;
 }
 
@@ -35,10 +42,15 @@ function uploadOrReplaceByFilenameAndFolder<ResponseData>({
     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<ResponseData>({
 interface ReplaceFileByIdData {
     file: File & Pick<GQLUpdateDamFileInput, "license" | "title" | "altText">;
     fileId: string;
-    importSourceId?: string;
-    importSourceType?: string;
 }
 
 export function replaceById<ResponseData>({
@@ -79,10 +89,6 @@ export function replaceById<ResponseData>({
     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
@@ -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";