Display info of uploaded files

moneymgr_web/src/widgets/UploadedFileWidget.tsx

@@ -0,0 +1,42 @@
+import ImageIcon from "@mui/icons-material/Image";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { Button } from "@mui/material";
+import { filesize } from "filesize";
+import React from "react";
+import { FileApi, UploadedFile } from "../api/FileApi";
+import { AsyncWidget } from "./AsyncWidget";
+
+export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
+  const [file, setFile] = React.useState<UploadedFile | null>(null);
+
+  const load = async () => {
+    setFile(await FileApi.GetFile(p.file_id));
+  };
+
+  return (
+    <AsyncWidget
+      errMsg="Failed"
+      build={() => <UploadedFileWidgetInner file={file!} />}
+      loadKey={p.file_id}
+      load={load}
+    />
+  );
+}
+
+function UploadedFileWidgetInner(p: {
+  file: UploadedFile;
+}): React.ReactElement {
+  return (
+    <Button
+      startIcon={
+        p.file.mime_type === "application/pdf" ? (
+          <PictureAsPdfIcon />
+        ) : (
+          <ImageIcon />
+        )
+      }
+    >
+      {p.file.file_name} ({filesize(p.file.file_size)})
+    </Button>
+  );
+}