@bindu-dashing/dam-solution-v2 5.9.256 → 5.9.257

package/build/MyDrive/FilesGridView.js

@@ -12,6 +12,7 @@ import { useState } from "react";
 import { useDamConfig } from "../hocs/DamConfigContext";
 import EditImageModal from "./ImageEditor/EditImageModal";
 import EditPdfModal from "./PdfEditor/EditPdfModal";
+import RefreshableImage from "../common/RefreshableImage";
 const IconInprogress = GrInProgress;
 const AiOutlineEditIcon = AiOutlineEdit;
 const AiOutlineCheckCircleIcon = AiOutlineCheckCircle;
@@ -51,7 +52,7 @@ const FilesGridView = ({ files, handleClick, selectedFileIds, isImagePicker, sel
                                                 openEditor(file);
                                             }, children: _jsx(AiOutlineEditIcon, { className: "md-lib-text-[18px] md-lib-text-textColor dark:md-lib-text-darkTextColor hover:md-lib-text-primary md-lib-cursor-pointer" }) }) }))] }), _jsx("div", { className: "md-lib-mt-2 md-lib-h-28 md-lib-mx-2.5 md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-flex md-lib-justify-center", children: get(file, "fileUploadStatus") === ThumbnailStatus.PENDING ? (
                                 // <IconInprogress className="mt-10 text-[40px] text-imagesColor" />
-                                _jsx(Image, { src: UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE, width: 100, height: 100 })) : (_jsx("img", { src: get(file, "thumbnailUrl", ""), alt: get(file, "name", "N/A"), className: "md-lib-w-full md-lib-h-full md-lib-object-contain md-lib-p-1" })) }), _jsx("div", { children: _jsx("p", { className: "md-lib-text-xs md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-px-5 md-lib-pt-2.5 md-lib-truncate md-lib-max-w-40", title: get(file, "name", "N/A"), children: get(file, "assetName", "N/A") }) })] }, get(file, "_id")));
+                                _jsx(Image, { src: UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE, width: 100, height: 100 })) : (_jsx(RefreshableImage, { src: get(file, "thumbnailUrl", ""), version: get(file, "updatedAt"), alt: get(file, "name", "N/A"), className: "md-lib-w-full md-lib-h-full md-lib-object-contain md-lib-p-1" })) }), _jsx("div", { children: _jsx("p", { className: "md-lib-text-xs md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-px-5 md-lib-pt-2.5 md-lib-truncate md-lib-max-w-40", title: get(file, "name", "N/A"), children: get(file, "assetName", "N/A") }) })] }, get(file, "_id")));
                 }) }), showEditModal && editFile && getEditorType(editFile) === "image" && (_jsx(EditImageModal, { open: showEditModal, handleClose: closeEditor, file: editFile })), showEditModal && editFile && getEditorType(editFile) === "pdf" && (_jsx(EditPdfModal, { open: showEditModal, handleClose: closeEditor, file: editFile }))] }));
 };
 export default FilesGridView;

package/build/MyDrive/ImageEditor/EditImage.js

@@ -19,7 +19,7 @@ import { get } from "lodash";
 import CustomButton from "../../common/Button";
 import { showNotification } from "../../common/notifications";
 import { FILE_UPLOAD_ERROR, SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../../utilities/constants/messages";
-import { FILE_UPLOAD_URL, SAVE_EDITED_FILE_THUMBNAIL_URL, SAVE_EDITED_FILE_URL, } from "../../utilities/constants/apiUrls";
+import { CREATE_FILE_URL, FILE_UPLOAD_URL, SAVE_EDITED_FILE_THUMBNAIL_URL, SAVE_EDITED_FILE_URL, } from "../../utilities/constants/apiUrls";
 import { generateFoldersQueryKey, invalidateData, QueryKeys, } from "../../utilities/constants/queryKeys";
 import { useQueryClient } from "react-query";
 import { useDamConfig } from "../../hocs/DamConfigContext";
@@ -106,30 +106,48 @@ const ImageEditorComponent = ({ file, handleClose, }) => {
         const newName = buildEditedName(get(file, "name", "edited.png"));
         const mimetype = editedFile.type || get(file, "mimetype") || "image/png";
         try {
+            // 1) ask backend for a presigned S3 upload URL
             const presigned = yield api.post(FILE_UPLOAD_URL, {
                 brandId,
                 folderId: currentFolderId,
                 files: [{ name: newName, size: editedFile.size }],
             });
-            const uploadUrl = get(presigned, ["data", 0, "url"]);
+            const uploadEntry = get(presigned, ["data", 0]);
+            const uploadUrl = get(uploadEntry, "url");
+            const filePath = get(uploadEntry, "filePath");
             if (!uploadUrl) {
                 showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
                 setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
                 return;
             }
+            // 2) PUT the edited binary to S3
             const s3Resp = yield fetch(uploadUrl, {
                 method: "PUT",
                 headers: { "Content-Type": mimetype },
                 body: editedFile,
             });
-            if (s3Resp.ok) {
-                invalidateAfterChange();
-                showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
-                handleClose();
-            }
-            else {
+            if (!s3Resp.ok) {
                 showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
+                setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false })));
+                return;
             }
+            // 3) register the file in the DB so it shows up in the folder grid
+            yield api.post(CREATE_FILE_URL, {
+                folderId: currentFolderId,
+                files: [
+                    {
+                        name: newName,
+                        path: filePath,
+                        size: editedFile.size,
+                        mimetype,
+                        metadata: {},
+                        teamIds: get(file, "teamIds") || [],
+                    },
+                ],
+            });
+            invalidateAfterChange();
+            showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
+            handleClose();
         }
         catch (error) {
             showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);

package/build/MyDrive/fileDetails/ImageViewer.js

@@ -4,6 +4,7 @@ import ImageOptions from "./ImageOptions";
 import { useState } from "react";
 import { SAMPLE_IMAGE_URL } from "../../utilities/constants/imageUrls";
 import { useDamConfig } from "../../hocs/DamConfigContext";
+import RefreshableImage from "../../common/RefreshableImage";
 const ImageViewer = ({ file, showFilePreview }) => {
     const damConfig = useDamConfig();
     const { isAdmin } = damConfig;
@@ -11,6 +12,6 @@ const ImageViewer = ({ file, showFilePreview }) => {
     const zoomOptions = ["10", "25", "50", "75", "100"];
     const imgWidth = 750 * (parseInt(zoom) / 100);
     // const imgHeight = 333 * (parseInt(zoom) / 100);
-    return (_jsxs("div", { className: "md-lib-relative md-lib-flex md-lib-flex-col md-lib-h-[calc(100vh-65px)] md-lib-w-full md-lib-overflow-hidden", children: [_jsx("div", { className: "md-lib-flex-1 md-lib-flex md-lib-justify-center md-lib-items-center md-lib-w-full md-lib-overflow-auto md-lib-min-h-0", children: _jsx("img", { src: get(file, "s3Url") || get(file, "downloadUrl") || get(file, "thumbnailUrl", SAMPLE_IMAGE_URL), alt: get(file, "name", ""), width: imgWidth, height: "auto", className: "md-lib-max-w-full md-lib-max-h-full md-lib-object-contain" }) }), showFilePreview && (_jsx("div", { className: "md-lib-flex md-lib-justify-center md-lib-items-center md-lib-py-4 md-lib-shrink-0", children: _jsx(ImageOptions, { zoom: zoom, setZoom: setZoom, zoomOptions: zoomOptions, file: file }) }))] }));
+    return (_jsxs("div", { className: "md-lib-relative md-lib-flex md-lib-flex-col md-lib-h-[calc(100vh-65px)] md-lib-w-full md-lib-overflow-hidden", children: [_jsx("div", { className: "md-lib-flex-1 md-lib-flex md-lib-justify-center md-lib-items-center md-lib-w-full md-lib-overflow-auto md-lib-min-h-0", children: _jsx(RefreshableImage, { src: get(file, "s3Url") || get(file, "downloadUrl") || get(file, "thumbnailUrl", SAMPLE_IMAGE_URL), version: get(file, "updatedAt"), alt: get(file, "name", ""), width: imgWidth, height: "auto", className: "md-lib-max-w-full md-lib-max-h-full md-lib-object-contain" }) }), showFilePreview && (_jsx("div", { className: "md-lib-flex md-lib-justify-center md-lib-items-center md-lib-py-4 md-lib-shrink-0", children: _jsx(ImageOptions, { zoom: zoom, setZoom: setZoom, zoomOptions: zoomOptions, file: file }) }))] }));
 };
 export default ImageViewer;

package/build/common/RefreshableImage.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ * <img> wrapper that bypasses the browser HTTP cache when `version` changes.
+ *
+ * Why: S3 presigned URLs don't change after a file is overwritten in place
+ * (same key → same signed URL). The browser's HTTP cache then serves the
+ * old binary even when react-query refetches the file list. Appending
+ * query params would break the S3 signature, so instead we re-fetch the URL
+ * with `cache: 'reload'` and display the result via an object URL — the
+ * blob URL is unique so the browser must paint the fresh bytes.
+ */
+type Props = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+    src: string;
+    version?: string | number | null;
+};
+declare const RefreshableImage: React.FC<Props>;
+export default RefreshableImage;

package/build/common/RefreshableImage.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+const RefreshableImage = (_a) => {
+    var { src, version } = _a, imgProps = __rest(_a, ["src", "version"]);
+    const [blobSrc, setBlobSrc] = useState(null);
+    const initialVersion = useRef(version);
+    useEffect(() => {
+        if (!version || version === initialVersion.current)
+            return;
+        let canceled = false;
+        fetch(src, { cache: "reload" })
+            .then((r) => r.blob())
+            .then((blob) => {
+            if (canceled)
+                return;
+            setBlobSrc((prev) => {
+                if (prev)
+                    URL.revokeObjectURL(prev);
+                return URL.createObjectURL(blob);
+            });
+        })
+            .catch(() => {
+            /* fall through to original src */
+        });
+        return () => {
+            canceled = true;
+        };
+    }, [version, src]);
+    useEffect(() => {
+        return () => {
+            if (blobSrc)
+                URL.revokeObjectURL(blobSrc);
+        };
+    }, [blobSrc]);
+    return _jsx("img", Object.assign({ src: blobSrc !== null && blobSrc !== void 0 ? blobSrc : src }, imgProps));
+};
+export default RefreshableImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bindu-dashing/dam-solution-v2",
-  "version": "5.9.256",
+  "version": "5.9.257",
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@emoji-mart/data": "^1.2.1",