@stoker-platform/web-app 0.5.108 → 0.5.110

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @stoker-platform/web-app
 
+## 0.5.110
+
+### Patch Changes
+
+- feat: add image thumbnails option
+    - @stoker-platform/node-client@0.5.62
+    - @stoker-platform/utils@0.5.53
+    - @stoker-platform/web-client@0.5.63
+
+## 0.5.109
+
+### Patch Changes
+
+- feat: add file options
+- Updated dependencies
+    - @stoker-platform/utils@0.5.52
+    - @stoker-platform/node-client@0.5.61
+    - @stoker-platform/web-client@0.5.62
+
 ## 0.5.108
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.108",
+    "version": "0.5.110",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.50.0",
-        "@stoker-platform/node-client": "0.5.60",
-        "@stoker-platform/utils": "0.5.51",
-        "@stoker-platform/web-client": "0.5.61",
+        "@stoker-platform/node-client": "0.5.62",
+        "@stoker-platform/utils": "0.5.53",
+        "@stoker-platform/web-client": "0.5.63",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Files.tsx

@@ -2,6 +2,7 @@ import { Helmet } from "react-helmet"
 import {
     CollectionMeta,
     CollectionSchema,
+    FileOptions,
     StokerCollection,
     StokerRecord,
     StorageItem,
@@ -26,6 +27,7 @@ import {
     getMetadata,
     updateMetadata,
 } from "firebase/storage"
+import type { FirebaseStorage } from "firebase/storage"
 import { getAuth } from "firebase/auth"
 import { Progress } from "./components/ui/progress"
 import { Button } from "./components/ui/button"
@@ -68,6 +70,84 @@ import {
     AlertDialogTitle,
 } from "./components/ui/alert-dialog"
 import { FilePermissionsDialog, FilePermissions } from "./FilePermissions"
+import { prepareFile } from "./utils/prepareFile"
+
+const IMAGE_FILE_EXTENSIONS = new Set([
+    "avif",
+    "bmp",
+    "gif",
+    "heic",
+    "heif",
+    "ico",
+    "jpeg",
+    "jpg",
+    "png",
+    "svg",
+    "webp",
+])
+
+const isImageFile = (name: string): boolean => {
+    const dot = name.lastIndexOf(".")
+    if (dot <= 0) return false
+    return IMAGE_FILE_EXTENSIONS.has(name.slice(dot + 1).toLowerCase())
+}
+
+interface FileImageThumbnailProps {
+    storage: FirebaseStorage
+    fullPath: string
+    fileName: string
+    pathPrefix: string
+}
+
+const FileImageThumbnail = ({ storage, fullPath, fileName, pathPrefix }: FileImageThumbnailProps) => {
+    const [phase, setPhase] = useState<"loading" | "display" | "fallback">("loading")
+    const [url, setUrl] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (!pathPrefix || !fullPath.startsWith(pathPrefix)) {
+            setPhase("fallback")
+            return
+        }
+        let cancelled = false
+        setPhase("loading")
+        setUrl(null)
+        const load = async () => {
+            try {
+                const fileRef = ref(storage, fullPath)
+                const downloadUrl = await getDownloadURL(fileRef)
+                if (!cancelled) {
+                    setUrl(downloadUrl)
+                    setPhase("display")
+                }
+            } catch {
+                if (!cancelled) {
+                    setPhase("fallback")
+                }
+            }
+        }
+        void load()
+        return () => {
+            cancelled = true
+        }
+    }, [storage, fullPath, pathPrefix])
+
+    if (phase === "loading") {
+        return <div className="h-12 w-12 shrink-0 rounded-md border bg-muted animate-pulse" aria-hidden />
+    }
+    if (phase === "fallback" || !url) {
+        return <File className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />
+    }
+    return (
+        <img
+            src={url}
+            alt={`Thumbnail for ${fileName}`}
+            className="max-h-12 w-12 shrink-0 rounded-md object-contain"
+            loading="lazy"
+            decoding="async"
+            onError={() => setPhase("fallback")}
+        />
+    )
+}
 
 interface FilesProps {
     collection: CollectionSchema
@@ -88,6 +168,7 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
 
     const [collectionTitle, setCollectionTitle] = useState("")
     const [meta, setMeta] = useState<CollectionMeta | undefined>(undefined)
+    const [fileOptions, setFileOptions] = useState<FileOptions | undefined>(undefined)
     const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([])
     const [isDragOver, setIsDragOver] = useState(false)
     const [currentPath, setCurrentPath] = useState("")
@@ -168,6 +249,8 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
             setCollectionTitle(titles?.collection || labels.collection)
             const meta = await getCachedConfigValue(customization, [...collectionAdminPath, "meta"])
             setMeta(meta)
+            const fileOptions = await getCachedConfigValue(customization, [...collectionAdminPath, "fileOptions"])
+            setFileOptions(fileOptions)
         }
         initialize()
     }, [])
@@ -238,7 +321,15 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
             const fileArray = Array.from(files)
 
             for (const file of fileArray) {
-                const filename = (customFilename || file.name).trim()
+                let preferredFilename = (customFilename || file.name).trim()
+                let uploadFile = file
+                if (fileOptions?.maxImageWidth) {
+                    const prepared = await prepareFile(file, preferredFilename, fileOptions)
+                    uploadFile = prepared.file
+                    preferredFilename = prepared.filename
+                }
+
+                const filename = preferredFilename
                 const validationError = validateStorageName(filename)
                 if (validationError) {
                     toast({
@@ -251,7 +342,7 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
                 const filePath = currentPath ? `${basePath}/${currentPath}/${filename}` : `${basePath}/${filename}`
                 const storageRef = ref(storage, filePath)
                 const uploadItem: UploadProgress = {
-                    file,
+                    file: uploadFile,
                     progress: 0,
                     status: "uploading",
                 }
@@ -280,46 +371,62 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
                     })
                 } catch {
                     setUploadProgress((prev) =>
-                        prev.map((item) => (item.file === file ? { ...item, status: "error" } : item)),
+                        prev.map((item) => (item.file === uploadFile ? { ...item, status: "error" } : item)),
                     )
                     continue
                 }
 
-                const uploadTask = uploadBytesResumable(storageRef, file, metadata)
+                const uploadTask = uploadBytesResumable(storageRef, uploadFile, metadata)
 
-                uploadTask.on(
-                    "state_changed",
-                    (snapshot) => {
-                        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
-                        setUploadProgress((prev) =>
-                            prev.map((item) => (item.file === file ? { ...item, progress } : item)),
-                        )
-                    },
-                    (error) => {
-                        setUploadProgress((prev) =>
-                            prev.map((item) =>
-                                item.file === file ? { ...item, status: "error", error: error.message } : item,
-                            ),
-                        )
-                        console.error(error.message)
-                        toast({
-                            title: "Upload failed",
-                            description: `Failed to upload ${filename}`,
-                            variant: "destructive",
-                        })
-                    },
-                    async () => {
-                        setUploadProgress((prev) =>
-                            prev.map((item) =>
-                                item.file === file ? { ...item, status: "completed", completedAt: Date.now() } : item,
-                            ),
-                        )
-                        toast({
-                            title: "Upload successful",
-                            description: `${filename} uploaded successfully`,
-                        })
+                await new Promise<void>((resolve) => {
+                    uploadTask.on(
+                        "state_changed",
+                        (snapshot) => {
+                            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+                            setUploadProgress((prev) =>
+                                prev.map((item) => (item.file === uploadFile ? { ...item, progress } : item)),
+                            )
+                        },
+                        (error) => {
+                            void runHooks("postFileAddError", globalConfig, customization, {
+                                record,
+                                fullPath: filePath,
+                                filename,
+                                permissions: {
+                                    read: metadata.customMetadata.read,
+                                    update: metadata.customMetadata.update,
+                                    delete: metadata.customMetadata.delete,
+                                },
+                                error,
+                            }).catch(() => {})
+                            setUploadProgress((prev) =>
+                                prev.map((item) =>
+                                    item.file === uploadFile
+                                        ? { ...item, status: "error", error: error.message }
+                                        : item,
+                                ),
+                            )
+                            console.error(error.message)
+                            toast({
+                                title: "Upload failed",
+                                description: `Failed to upload ${filename}`,
+                                variant: "destructive",
+                            })
+                            resolve()
+                        },
+                        async () => {
+                            setUploadProgress((prev) =>
+                                prev.map((item) =>
+                                    item.file === uploadFile
+                                        ? { ...item, status: "completed", completedAt: Date.now() }
+                                        : item,
+                                ),
+                            )
+                            toast({
+                                title: "Upload successful",
+                                description: `${filename} uploaded successfully`,
+                            })
 
-                        try {
                             await runHooks("postFileAdd", globalConfig, customization, {
                                 record,
                                 fullPath: filePath,
@@ -329,14 +436,13 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
                                     update: metadata.customMetadata.update,
                                     delete: metadata.customMetadata.delete,
                                 },
-                            })
-                        } catch {
-                            return
-                        }
+                            }).catch(() => {})
 
-                        loadDirectory(currentPath)
-                    },
-                )
+                            loadDirectory(currentPath)
+                            resolve()
+                        },
+                    )
+                })
             }
 
             setShowFilenameDialog(false)
@@ -346,7 +452,7 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
             setPendingUploadFiles([])
             setIsMultipleFileUpload(false)
         },
-        [record, currentPath, basePath, currentUser],
+        [record, currentPath, basePath, currentUser, fileOptions],
     )
 
     const handleFileUpload = useCallback(
@@ -1010,9 +1116,20 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
                                         >
                                             <div className="flex items-center space-x-3 flex-1 min-w-0">
                                                 {item.isFolder ? (
-                                                    <Folder className="h-5 w-5 text-blue-500" />
+                                                    <Folder className="h-5 w-5 shrink-0 text-blue-500" />
+                                                ) : fileOptions?.thumbnails === true && isImageFile(item.name) ? (
+                                                    <FileImageThumbnail
+                                                        storage={storage}
+                                                        fullPath={item.fullPath}
+                                                        fileName={item.name}
+                                                        pathPrefix={
+                                                            record
+                                                                ? `${tenantId}/${labels.collection}/${record.id}`
+                                                                : ""
+                                                        }
+                                                    />
                                                 ) : (
-                                                    <File className="h-5 w-5 text-gray-500" />
+                                                    <File className="h-5 w-5 shrink-0 text-gray-500" />
                                                 )}
 
                                                 {editingFile === item.name && !isDisabled ? (

package/src/Form.tsx

@@ -2621,7 +2621,18 @@ function RecordForm({
                     uploadTask.on(
                         "state_changed",
                         undefined,
-                        () => {
+                        (error) => {
+                            void runHooks("postFileAddError", globalConfig, customization, {
+                                record: targetRecord,
+                                fullPath: filePath,
+                                filename,
+                                permissions: {
+                                    read: metadata.customMetadata.read,
+                                    update: metadata.customMetadata.update,
+                                    delete: metadata.customMetadata.delete,
+                                },
+                                error,
+                            }).catch(() => {})
                             toast({
                                 title: "Upload failed",
                                 description: `Failed to upload ${filename}`,
@@ -2768,7 +2779,18 @@ function RecordForm({
                     uploadTask.on(
                         "state_changed",
                         undefined,
-                        () => {
+                        (error) => {
+                            void runHooks("postFileAddError", globalConfig, customization, {
+                                record: targetRecord,
+                                fullPath: filePath,
+                                filename,
+                                permissions: {
+                                    read: metadata.customMetadata.read,
+                                    update: metadata.customMetadata.update,
+                                    delete: metadata.customMetadata.delete,
+                                },
+                                error,
+                            }).catch(() => {})
                             setIsUploading((prev) => ({ ...prev, [fieldName]: false }))
                             toast({
                                 title: "Upload failed",

package/src/utils/prepareFile.ts

@@ -0,0 +1,130 @@
+import type { FileOptions } from "@stoker-platform/types"
+
+const DEFAULT_MAX_WIDTH = 1920
+const DEFAULT_JPEG_QUALITY = 1
+
+const replaceExtension = (filename: string, newExt: string): string => {
+    const trimmed = filename.trim()
+    const dot = trimmed.lastIndexOf(".")
+    if (dot <= 0) {
+        return `${trimmed}${newExt}`
+    }
+    return `${trimmed.slice(0, dot)}${newExt}`
+}
+
+const loadImageFromFile = (file: File): Promise<HTMLImageElement> => {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file)
+        const img = new Image()
+        img.decoding = "async"
+        img.onload = () => {
+            URL.revokeObjectURL(url)
+            resolve(img)
+        }
+        img.onerror = () => {
+            URL.revokeObjectURL(url)
+            reject(new Error("Image decode failed"))
+        }
+        img.src = url
+    })
+}
+
+export const prepareFile = async (
+    file: File,
+    preferredFileName: string,
+    fileOptions: FileOptions,
+): Promise<{ file: File; filename: string }> => {
+    if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
+        return { file, filename: preferredFileName }
+    }
+    const usePngOutput = file.type === "image/png"
+
+    let bitmap: ImageBitmap | undefined
+    try {
+        let width: number
+        let height: number
+        let img: HTMLImageElement | undefined
+
+        try {
+            bitmap = await createImageBitmap(file)
+            width = bitmap.width
+            height = bitmap.height
+        } catch {
+            img = await loadImageFromFile(file)
+            width = img.naturalWidth
+            height = img.naturalHeight
+        }
+
+        if (width < 1 || height < 1) {
+            return { file, filename: preferredFileName }
+        }
+
+        const maxWidth =
+            typeof fileOptions.maxImageWidth === "number" && fileOptions.maxImageWidth > 0
+                ? Math.floor(fileOptions.maxImageWidth)
+                : DEFAULT_MAX_WIDTH
+
+        let targetW = width
+        let targetH = height
+        if (width > maxWidth || height > maxWidth) {
+            if (width >= height) {
+                targetW = maxWidth
+                targetH = Math.max(1, Math.round((height / width) * maxWidth))
+            } else {
+                targetH = maxWidth
+                targetW = Math.max(1, Math.round((width / height) * maxWidth))
+            }
+        }
+        const didDownscale = targetW < width || targetH < height
+
+        const canvas = document.createElement("canvas")
+        canvas.width = targetW
+        canvas.height = targetH
+        const ctx = canvas.getContext("2d")
+        if (!ctx) {
+            return { file, filename: preferredFileName }
+        }
+
+        if (bitmap) {
+            ctx.drawImage(bitmap, 0, 0, targetW, targetH)
+        } else if (img) {
+            ctx.drawImage(img, 0, 0, targetW, targetH)
+        }
+
+        const blob = await new Promise<Blob | null>((resolve) => {
+            if (usePngOutput) {
+                canvas.toBlob((b) => resolve(b), "image/png")
+            } else {
+                canvas.toBlob((b) => resolve(b), "image/jpeg", DEFAULT_JPEG_QUALITY)
+            }
+        })
+
+        if (!blob) {
+            return { file, filename: preferredFileName }
+        }
+
+        const noBenefit =
+            blob.size >= file.size &&
+            !didDownscale &&
+            ((usePngOutput && file.type === "image/png") || (!usePngOutput && file.type === "image/jpeg"))
+        if (noBenefit) {
+            return { file, filename: preferredFileName }
+        }
+
+        const outMime = usePngOutput ? "image/png" : "image/jpeg"
+        const ext = usePngOutput ? ".png" : ".jpg"
+        const nextFilename = replaceExtension(preferredFileName, ext)
+        const outFile = new File([blob], nextFilename, {
+            type: outMime,
+            lastModified: Date.now(),
+        })
+
+        return { file: outFile, filename: nextFilename }
+    } catch {
+        return { file, filename: preferredFileName }
+    } finally {
+        if (bitmap) {
+            bitmap.close()
+        }
+    }
+}