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>

index.css

@@ -70,22 +70,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-::file-selector-button {
-  display: none;
-}
-
-/* Same thing as above but for Safari */
-@media not all and (min-resolution: 0.001dpcm) {
-  @supports (-webkit-appearance: none) {
-    text-indent: -120px;
-    margin-left: -7em;
-
-    &::file-selector-button {
-      display: inline;
-    }
-  }
-}
-
 .desktop-nav {
   visibility: visible;
 }