#1178 | fix: upload issues for multiselect file

avniproject · Dec 11, 2024 · 9813187 · 9813187
1 parent c4d3b39
commit 9813187
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/dataEntryApp/components/MediaUploader.js b/src/dataEntryApp/components/MediaUploader.js
@@ -89,24 +89,33 @@ function invokeUpdate(update, mediaUrl) {
   update(mediaUrl);
 }
 
-function addMediaUrlToLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue) {
-  invokeUpdate(update, fileName);
+function addMediaUrlToLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue, obsValue) {
   if (isMultiSelect) {
     setLocalObsValue(locObsValue =>
       locObsValue && !isArrayLikeObject(locObsValue)
         ? [locObsValue, fileName].filter(ele => !isEmpty(ele))
         : [...(locObsValue || []), fileName].filter(ele => !isEmpty(ele))
     );
+    const files =
+      obsValue && !isArrayLikeObject(obsValue)
+        ? [obsValue, fileName].filter(ele => !isEmpty(ele))
+        : [...(obsValue || []), fileName].filter(ele => !isEmpty(ele));
+    invokeUpdate(update, files);
   } else {
     setLocalObsValue(fileName);
+    invokeUpdate(update, fileName);
   }
 }
 
-function removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue) {
-  invokeUpdate(update, fileName);
+function removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue, obsValue) {
+  if (isMultiSelect && isArrayLikeObject(obsValue)) {
+    const files = obsValue.filter(item => item !== fileName);
+    invokeUpdate(update, files);
+  }
   if (isMultiSelect && isArrayLikeObject(localObsValue)) {
     setLocalObsValue(locObsValue => locObsValue.filter(item => item !== fileName));
   } else {
+    invokeUpdate(update, fileName);
     if (localObsValue === fileName) setLocalObsValue(); //Remove previous value
   }
 }
@@ -133,7 +142,8 @@ function uploadMediaAndUpdateObservationValue(
   isMultiSelect,
   localObsValue,
   update,
-  onDelete
+  onDelete,
+  obsValue
 ) {
   etFiles.forEach(file => {
     const fileReader = new FileReader();
@@ -144,7 +154,7 @@ function uploadMediaAndUpdateObservationValue(
         .uploadFile("/web/uploadMedia", file)
         .then(r => {
           setUploadButtonClicked(oldValue => oldValue - 1);
-          addMediaUrlToLocalObsValue(update, r.data, isMultiSelect, localObsValue, setLocalObsValue);
+          addMediaUrlToLocalObsValue(update, r.data, isMultiSelect, localObsValue, setLocalObsValue, obsValue);
         })
         .catch(r => {
           const error = `${get(r, "response.data") || get(r, "message") || "Unknown error occurred while uploadButtonClicked media"}`;
@@ -192,15 +202,24 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
       alert(alerts);
       return;
     }
-    uploadMediaAndUpdateObservationValue(etFiles, setUploadButtonClicked, setLocalObsValue, isMultiSelect, localObsValue, update, onDelete);
+    uploadMediaAndUpdateObservationValue(
+      etFiles,
+      setUploadButtonClicked,
+      setLocalObsValue,
+      isMultiSelect,
+      localObsValue,
+      update,
+      onDelete,
+      obsValue
+    );
   };
 
   const onDelete = fileName => {
-    removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue);
+    removeMediaUrlFromLocalObsValue(update, fileName, isMultiSelect, localObsValue, setLocalObsValue, obsValue);
     removeFileFromPreview(fileName, preview, setPreview);
   };
 
-  const mediaPreviewMap = (fileToPreview, label) => ({
+  const mediaPreviewMap = (fileToPreview, label, previewValue) => ({
     image: <img src={fileToPreview} alt={label} width={200} height={200} onClick={() => setOpenImage(fileToPreview)} />,
     video: (
       <video preload="auto" controls width={200} height={200} controlsList="nodownload">
@@ -209,7 +228,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
       </video>
     ),
     audio: <audio preload="auto" controls src={fileToPreview} controlsList="nodownload" />,
-    file: <FilePreview url={fileToPreview} obsValue={obsValue} />
+    file: <FilePreview url={fileToPreview} obsValue={previewValue} />
   });
 
   const renderMedia = fileName => {
@@ -231,7 +250,7 @@ export const MediaUploader = ({ label, obsValue, mediaType, update, formElement
             {preview[fileName]}
           </p>
         ) : (
-          mediaPreviewMap(preview[fileName], MissingSignedMediaMessage)[mediaType]
+          mediaPreviewMap(preview[fileName], MissingSignedMediaMessage, fileName)[mediaType]
         )}
         <Button style={{ float: "left", color: "red" }} onClick={() => onDelete(fileName)}>
           <CloseIcon />

diff --git a/src/dataEntryApp/components/Observations.js b/src/dataEntryApp/components/Observations.js
@@ -299,12 +299,12 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
 
   const fileOptions = conceptName => {
     const signedURLS = mediaDataList.filter(mediaData => mediaData.altTag === conceptName).map(mediaData => mediaData.url);
-    return _.isNil(signedURLS) ? (
+    return _.isEmpty(signedURLS) ? (
       <TextField>MediaData.MissingSignedMediaMessage</TextField>
     ) : (
       <>
         {signedURLS.map((signedURL, index) => (
-          <>
+          <React.Fragment key={index}>
             <Link
               to={"#"}
               onClick={event => {
@@ -316,7 +316,7 @@ const Observations = ({ observations, additionalRows, form, customKey, highlight
               {t("View/Download File")}
             </Link>
             <br />
-          </>
+          </React.Fragment>
         ))}
       </>
     );