Image On Preview Caching Issue In Updated Files

Description

It seems that when you upload a file and add a preview, the preview works initially. However, after editing and updating the file, the preview for the same URL doesn't update as expected, even though you’re using a timestamp to handle caching issues.

Steps to reproduce

Upload a file. Apply markup and edit the file. Save the edited file. Preview the file multiple times (e.g., more than 3 times).

Sample HTML markup

import React from "react"; import LightGallery from "lightgallery/react";

// import plugins if you need import lgThumbnail from "lightgallery/plugins/thumbnail"; import lgZoom from "lightgallery/plugins/zoom"; import lgFullscreen from "lightgallery/plugins/fullscreen"; import lgAutoplay from "lightgallery/plugins/autoplay";

const LightGalleryModel = React.forwardRef< HTMLDivElement, ILightGalleryModelProps

(({ children, className = "", ...props }, ref) => { return (

); });

export default LightGalleryModel;

const FilePreview: React.FC = ({ imageData, isDeleteOrUpdateFileLoading, }) => { const [punchListPdfViewOpen, setPunchListPdfViewOpen] = useState(false); const [previewUrlOpen, setPreviewUrlOpen] = useState(false); const file_path = imageData?.file_path?.toString(); let file_ext = imageData?.file_ext?.toString(); let file_name = imageData?.file_name?.toString(); const download_Url = imageData?.original_url?.toString();

// Function to extract the file extension from the file path const getFileExtension = (path: string): string => { const parts = path.split("."); return parts.length > 1 ? parts.pop()! : ""; };

// Function to extract the file name from the file path const getFileName = (path: string): string => { const parts = path?.split("/"); const fullFileName = parts.length > 0 ? parts.pop()! : ""; return fullFileName.includes(".") ? fullFileName.split(".")[0] : fullFileName; };

// Validate file_ext and extract from file_path if necessary const validExtensions = [ "JPG", "JPEG", "PNG", "GIF", "WEBP", "PDF", "TXT", "DOC", "DOCX", "RTF", "ODT", "HTML", "SXW", "XLS", "XLSX", "ODS", "SXC", "CSV", "TSV", "PPT", "PPTX", "MP4", ];

const isValidExtension = (ext: string) => { return validExtensions.includes(ext.toUpperCase()); };

if (!isValidExtension(file_ext)) { file_ext = getFileExtension(file_path); file_name = getFileName(file_path); }

const ext = file_ext?.toUpperCase(); switch (ext) { case "JPG": case "JPEG": case "PNG": case "GIF": case "WEBP": return ( <a href={file_path} className={bg-white hover:bg-deep-orange-500 text-black hover:text-white flex items-center justify-center w-12 rounded text-13 h-6 max-w-[62px] hover:shadow-primary-500 lightGalleryModel} data-sub-html={<h4>${file_name}</h4>} data-download-url={download_Url}

{isDeleteOrUpdateFileLoading ? ( <FontAwesomeIcon icon={faSpinnerThird} className="text-black/80 w-3.5 h-3.5" spin /> ) : ( "View" )} <img src={${file_path}?v=${new Date().getTime()}&class=thumb} className="hidden" alt="not found filepreviewcall2" /> );

case "PDF":
  return (
    <>
      <Button
        className="py-0 px-2.5 border-0 bg-white hover:!bg-deep-orange-500 text-black hover:!text-white h-6 text-13 rounded"
        onClick={() => setPunchListPdfViewOpen(true)}
      >
        {isDeleteOrUpdateFileLoading ? (
          <FontAwesomeIcon
            icon={faSpinnerThird}
            className="text-black/80 w-3.5 h-3.5"
            spin
          />
        ) : (
          "View"
        )}
      </Button>
      <PdfModal
        isOpen={punchListPdfViewOpen}
        modaltitle={file_name}
        onCloseModal={() => setPunchListPdfViewOpen(false)}
        fileUrl={`${file_path}?v=${new Date().getTime()}&class=thumb` ?? ""}
      />
    </>
  );
case "TXT":
case "DOC":
case "DOCX":
case "RTF":
case "ODT":
case "HTML":
case "SXW":
case "XLS":
case "XLSX":
case "ODS":
case "SXC":
case "CSV":
case "TSV":
  return (
    <>
      <Button
        className="py-0 px-2.5 border-0 bg-white hover:!bg-deep-orange-500 text-black hover:!text-white h-6 text-13 rounded"
        onClick={() => setPreviewUrlOpen(true)}
      >
        {isDeleteOrUpdateFileLoading ? (
          <FontAwesomeIcon
            icon={faSpinnerThird}
            className="text-black/80 w-3.5 h-3.5"
            spin
          />
        ) : (
          "View"
        )}
      </Button>
      <CommonModal
        isOpen={previewUrlOpen}
        widthSize="98%"
        onCloseModal={() => setPreviewUrlOpen(false)}
        modalBodyClass="p-0"
        header={{
          title: file_name,
          closeIcon: true,
        }}
      >
        <div className="p-4">
          <iframe
            id="documentViewer"
            data-src="'+zohodata['document_url']+'"
            src={`https://drive.google.com/viewerng/viewer?embedded=true&origin=${
              window.ENV.PANEL_URL
            }&url=${file_path}?${Date.now()}`}
            style={{ width: "100%", height: "500px" }}
          />
        </div>
      </CommonModal>
    </>
  );
default:
  // This will handle all other file types

  return (
    <a
      href={file_path}
      className={`bg-white hover:bg-deep-orange-500 text-black hover:text-white flex items-center justify-center w-12 rounded text-13 h-6 max-w-[62px] hover:shadow-primary-500`}
      download
      data-sub-html={`<h4>${file_name}</h4>`}
    >
      {isDeleteOrUpdateFileLoading ? (
        <FontAwesomeIcon
          icon={faSpinnerThird}
          className="text-black/80 w-3.5 h-3.5"
          spin
        />
      ) : (
        "View"
      )}
      <img src={file_path} className="hidden" alt="not found 2" />
    </a>
  );

} };

sachinchoolur / lightGallery