Use react state to keep track of file names

app/routes/report.tsx

@@ -46,6 +46,7 @@ export function meta() {
 export default function () {
   const [fileProgress, setFileProgress] = useState(0);
   const [submissionType, setSubmissionType] = useState("exploit");
+  const [fileNames, setFileNames] = useState([] as string[]);
   const [showSuccess, setShowSuccess] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
@@ -311,7 +312,26 @@ export default function () {
           >
             Select File
           </Button>
-          <input id="evidence" multiple type="file" />
+          <input
+            id="evidence"
+            multiple
+            onChange={(e) => {
+              const names = [];
+
+              for (let i = 0; i < (e.target.files?.length || 0); i++) {
+                const file = e.target.files?.item(i);
+
+                if (file) names.push(file.name);
+              }
+
+              setFileNames(names);
+            }}
+            style={{ display: "none" }}
+            type="file"
+          />
+          <Text>
+            {fileNames.length ? fileNames.join(", ") : "No files chosen"}
+          </Text>
         </FormControl>
         <br />
         <FormControl>