From 928dc751d9d4f21a23905ef525a1a87f6c743983 Mon Sep 17 00:00:00 2001
From: Jeff McMillen <jmcmillenmusic@gmail.com>
Date: Fri, 20 Dec 2024 10:52:21 -0600
Subject: [PATCH] Bug/WP-321: Removing oversized attachments from tickets
 (#1012)

* Added functionality to remove oversized files attached to tickets

* Still trying to only delete one oversized file at a time

* Still trying to get the list of rejected files to refresh automatically

* Finally got to filter rejectedFiles correctly

---------

Co-authored-by: Jeff McMillen <jm63959@TACCs-MacBook-Pro.local>
---
 .../_common/Form/FileInputDropZone.jsx          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/_common/Form/FileInputDropZone.jsx b/client/src/components/_common/Form/FileInputDropZone.jsx
index 0defeee75..27f7946b4 100644
--- a/client/src/components/_common/Form/FileInputDropZone.jsx
+++ b/client/src/components/_common/Form/FileInputDropZone.jsx
@@ -1,5 +1,5 @@
 /* FP-993: Allow use by DataFilesUploadModal */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { Button, InlineMessage } from '_common';
 import PropTypes from 'prop-types';
@@ -45,6 +45,13 @@ function FileInputDropZone({
     }
   };
 
+  const removeRejectedFile = (i) => {
+    const newRejectedFiles = rejectedFiles.filter(
+      (file) => file !== rejectedFiles[i]
+    );
+    setRejectedFiles(newRejectedFiles);
+  };
+
   const showFileList = (files && files.length > 0) || rejectedFiles.length > 0;
 
   return (
@@ -74,6 +81,14 @@ function FileInputDropZone({
                   <InlineMessage type="error">
                     Exceeds File Size Limit
                   </InlineMessage>
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      removeRejectedFile(i);
+                    }}
+                  >
+                    Remove
+                  </Button>
                 </div>
               ))}
             {files &&