Exp fix upload files error

.circleci/config.yml

@@ -40,30 +40,30 @@ references:
 
   # In addition, it's common practice to disable acceptance tests and
   # ignore tests for dp3 deploys. See the branch settings below.
-  dp3-branch: &dp3-branch placeholder_branch_name
+  dp3-branch: &dp3-branch exp-fix-upload-files-error
   # MUST BE ONE OF: loadtest, demo, exp.
   # These are used to pull in env vars so the spelling matters!
-  dp3-env: &dp3-env placeholder_env
+  dp3-env: &dp3-env exp
 
   # set integration-ignore-branch to the branch if you want to IGNORE
   # integration tests, or `placeholder_branch_name` if you do want to
   # run them
-  integration-ignore-branch: &integration-ignore-branch placeholder_branch_name
+  integration-ignore-branch: &integration-ignore-branch exp-fix-upload-files-error
 
   # set integration-mtls-ignore-branch to the branch if you want to
   # IGNORE mtls integration tests, or `placeholder_branch_name` if you
   # do want to run them
-  integration-mtls-ignore-branch: &integration-mtls-ignore-branch placeholder_branch_name
+  integration-mtls-ignore-branch: &integration-mtls-ignore-branch exp-fix-upload-files-error
 
   # set client-ignore-branch to the branch if you want to IGNORE
   # client tests, or `placeholder_branch_name` if you do want to run
   # them
-  client-ignore-branch: &client-ignore-branch placeholder_branch_name
+  client-ignore-branch: &client-ignore-branch exp-fix-upload-files-error
 
   # set server-ignore-branch to the branch if you want to IGNORE
   # server tests, or `placeholder_branch_name` if you do want to run
   # them
-  server-ignore-branch: &server-ignore-branch placeholder_branch_name
+  server-ignore-branch: &server-ignore-branch exp-fix-upload-files-error
 
 executors:
   base_small:

src/components/UploadsTable/UploadsTable.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import bytes from 'bytes';
 import moment from 'moment';
@@ -12,6 +12,9 @@ import SectionWrapper from 'components/Customer/SectionWrapper';
 import { ExistingUploadsShape } from 'types/uploads';
 
 const UploadsTable = ({ className, uploads, onDelete, showDeleteButton, showDownloadLink = false }) => {
+  const [fileAvailable, setFileAvailable] = useState({});
+  const pollingInterval = 5000; // Poll every 5 seconds
+
   const getIcon = (fileType) => {
     switch (fileType) {
       case 'application/pdf':
@@ -27,6 +30,52 @@ const UploadsTable = ({ className, uploads, onDelete, showDeleteButton, showDown
     }
   };
 
+  const checkFileAvailability = async (url, fileId) => {
+    try {
+      const response = await fetch(url, { method: 'GET', headers: { Range: 'bytes=0-0' } }); // Try to fetch just a byte
+      if (response.ok) {
+        setFileAvailable((prev) => ({ ...prev, [fileId]: true })); // Mark as available
+      } else {
+        setFileAvailable((prev) => ({ ...prev, [fileId]: false })); // Mark as unavailable
+      }
+    } catch (error) {
+      setFileAvailable((prev) => ({ ...prev, [fileId]: false })); // Mark as unavailable if error occurs
+    }
+  };
+
+  useEffect(() => {
+    const intervalIds = {}; // Store interval IDs for each file to clear later
+
+    uploads.forEach((upload) => {
+      if (upload.url && !Object.hasOwn(fileAvailable, upload.id)) {
+        // Start polling if the file URL is available and polling isn't already in progress
+        intervalIds[upload.id] = setInterval(() => {
+          checkFileAvailability(upload.url, upload.id);
+        }, pollingInterval);
+      }
+    });
+
+    // Cleanup polling on component unmount
+    return () => {
+      Object.values(intervalIds).forEach(clearInterval); // Clear all intervals
+    };
+  }, [uploads, fileAvailable]);
+
+  const renderFileContent = (upload) => {
+    if (showDownloadLink && upload.url) {
+      // If the file is available, show a link; otherwise, just the filename as plain text
+      return fileAvailable[upload.id] ? (
+        <a href={upload.url} download>
+          {upload.filename}
+        </a>
+      ) : (
+        upload.filename // Plain text filename if file is not available
+      );
+    }
+
+    return upload.filename; // Plain text filename if download link is not shown
+  };
+
   return (
     uploads?.length > 0 && (
       <SectionWrapper className={classnames(styles.uploadsTableContainer, className)} data-testid="uploads-table">
@@ -37,15 +86,7 @@ const UploadsTable = ({ className, uploads, onDelete, showDeleteButton, showDown
               <div className={styles.fileInfoContainer}>
                 <FontAwesomeIcon size="lg" icon={getIcon(upload.contentType)} className={styles.faIcon} />
                 <div className={styles.fileInfo}>
-                  <p>
-                    {showDownloadLink ? (
-                      <a href={upload.url} download>
-                        {upload.filename}
-                      </a>
-                    ) : (
-                      upload.filename
-                    )}
-                  </p>
+                  <p>{renderFileContent(upload)}</p>
                   <p className={styles.fileSizeAndTime}>
                     <span className={styles.uploadFileSize}>{bytes(upload.bytes)}</span>
                     <span>Uploaded {moment(upload.createdAt).format('DD MMM YYYY h:mm A')}</span>