@firecms/core 3.0.0-rc.1 → 3.0.0-rc.3

package/src/util/objects.ts

@@ -12,6 +12,21 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
+
+export function isPlainObject(obj:any) {
+    // 1. Rule out non-objects, null, and arrays
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+
+    // 2. Get the object's direct prototype
+    const proto = Object.getPrototypeOf(obj);
+
+    // 3. A plain object's direct prototype is Object.prototype
+    return proto === Object.prototype;
+}
+
+
 export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(
     target: T,
     source: U,
@@ -47,8 +62,31 @@ export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>
                 // If source value is a Date, create a new Date instance.
                 (output as any)[key] = new Date(sourceValue.getTime());
             } else if (Array.isArray(sourceValue)) {
-                // If source value is an array, create a shallow copy of the array.
-                (output as any)[key] = [...sourceValue];
+                if (Array.isArray(outputValue)) {
+                    const newArray = [];
+                    const maxLength = Math.max(outputValue.length, sourceValue.length);
+                    for (let i = 0; i < maxLength; i++) {
+                        const sourceItem = sourceValue[i];
+                        const targetItem = outputValue[i];
+
+                        if (i >= sourceValue.length) { // source is shorter
+                            newArray[i] = targetItem;
+                        } else if (i >= outputValue.length) { // target is shorter
+                            newArray[i] = sourceItem;
+                        } else if (sourceItem === null) {
+                            newArray[i] = targetItem;
+                        } else if (isObject(sourceItem) && isObject(targetItem)) {
+                            newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+                        } else {
+                            newArray[i] = sourceItem;
+                        }
+                    }
+                    (output as any)[key] = newArray;
+                } else {
+                    // If output's value (from target) is not an array,
+                    // overwrite with a shallow copy of the source array.
+                    (output as any)[key] = [...sourceValue];
+                }
             } else if (isObject(sourceValue)) {
                 // If source value is an object:
                 if (isObject(outputValue)) {

package/src/util/useStorageUploadController.tsx

@@ -1,10 +1,10 @@
-import Resizer from "react-image-file-resizer";
+import Compressor from "compressorjs";
 import equal from "react-fast-compare";
 
 import {
     ArrayProperty,
     EntityValues,
-    ImageCompression,
+    ImageResize,
     Property,
     PropertyOrBuilder,
     ResolvedArrayProperty,
@@ -76,7 +76,9 @@ export function useStorageUploadController<M extends object>({
     const metadata: Record<string, any> | undefined = storage?.metadata;
     const size = multipleFilesSupported ? "medium" : "large";
 
-    const compression: ImageCompression | undefined = storage?.imageCompression;
+    // Support both new imageResize and deprecated imageCompression
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
         getInternalInitialValue(multipleFilesSupported, value, metadata, size);
@@ -169,6 +171,14 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalValue, multipleFilesSupported, onChange, storage, storageSource]);
 
+    const onFileUploadError = useCallback((entry: StorageFieldItem) => {
+        console.debug("onFileUploadError", entry);
+
+        // Remove the failed entry from internalValue
+        const newValue = internalValue.filter(item => item.id !== entry.id);
+        setInternalValue(newValue);
+    }, [internalValue]);
+
     const onFilesAdded = useCallback(async (acceptedFiles: File[]) => {
 
         if (!acceptedFiles.length || disabled)
@@ -193,8 +203,8 @@ export function useStorageUploadController<M extends object>({
         if (multipleFilesSupported) {
             newInternalValue = [...internalValue,
                 ...(await Promise.all(acceptedFiles.map(async file => {
-                    if (compression && compressionFormat(file)) {
-                        file = await resizeAndCompressImage(file, compression)
+                    if ((imageResize || legacyCompression) && isImageFile(file)) {
+                        file = await resizeImage(file, imageResize, legacyCompression);
                     }
 
                     return {
@@ -206,9 +216,9 @@ export function useStorageUploadController<M extends object>({
                     } as StorageFieldItem;
                 })))];
         } else {
-            let file = acceptedFiles[0]
-            if (compression && compressionFormat(file)) {
-                file = await resizeAndCompressImage(file, compression)
+            let file = acceptedFiles[0];
+            if ((imageResize || legacyCompression) && isImageFile(file)) {
+                file = await resizeImage(file, imageResize, legacyCompression);
             }
 
             newInternalValue = [{
@@ -223,7 +233,7 @@ export function useStorageUploadController<M extends object>({
         // Remove either storage path or file duplicates
         newInternalValue = removeDuplicates(newInternalValue);
         setInternalValue(newInternalValue);
-    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size]);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
 
     return {
         internalValue,
@@ -232,6 +242,7 @@ export function useStorageUploadController<M extends object>({
         fileNameBuilder,
         storagePathBuilder,
         onFileUploadComplete,
+        onFileUploadError,
         onFilesAdded,
         multipleFilesSupported
     }
@@ -276,31 +287,57 @@ function getRandomId() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
 }
 
-const supportedTypes: Record<string, string> = {
-    "image/jpeg": "JPEG",
-    "image/png": "PNG",
-    "image/webp": "WEBP"
+/**
+ * Check if a file is an image type supported for resizing
+ */
+function isImageFile(file: File): boolean {
+    return file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/webp";
 }
-const compressionFormat = (file: File) => supportedTypes[file.type] ? supportedTypes[file.type] : null;
-
-const defaultQuality = 100;
-const resizeAndCompressImage = (file: File, compression: ImageCompression) => new Promise<File>((resolve) => {
 
-    const inputQuality = compression.quality === undefined ? defaultQuality : compression.quality;
-    const quality = inputQuality >= 0 ? inputQuality <= 100 ? inputQuality : 100 : 100;
-
-    const format = compressionFormat(file);
-    if (!format) {
-        throw Error("resizeAndCompressImage: Unsupported image format");
+/**
+ * Resize and compress an image using compressorjs.
+ * Supports both the new imageResize API and legacy imageCompression for backward compatibility.
+ */
+async function resizeImage(
+    file: File,
+    imageResize?: StorageConfig["imageResize"],
+    legacyCompression?: ImageResize
+): Promise<File> {
+    // Determine configuration (new API takes precedence)
+    const maxWidth = imageResize?.maxWidth ?? legacyCompression?.maxWidth;
+    const maxHeight = imageResize?.maxHeight ?? legacyCompression?.maxHeight;
+    const quality = (imageResize?.quality ?? legacyCompression?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+
+    // Determine output format
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+        mimeType = `image/${imageResize.format}`;
     }
-    Resizer.imageFileResizer(
-        file,
-        compression.maxWidth || Number.MAX_VALUE,
-        compression.maxHeight || Number.MAX_VALUE,
-        format,
-        quality,
-        0,
-        (file: string | Blob | File | ProgressEvent<FileReader>) => resolve(file as File),
-        "file"
-    )
-});
+
+    return new Promise<File>((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxWidth,
+            maxHeight,
+            mimeType,
+            // Use cover mode if specified (crops to fit)
+            // Otherwise use contain mode (scales to fit)
+            ...(mode === "cover" || mode === undefined ? {
+                width: maxWidth,
+                height: maxHeight,
+                resize: "cover" as const
+            } : {}),
+            success: (result) => {
+                const compressedFile = new File([result], file.name, {
+                    type: result.type,
+                    lastModified: Date.now(),
+                });
+                resolve(compressedFile);
+            },
+            error: reject,
+        });
+    });
+}