Remove mui-file-input dependency

2025-05-20 21:42:05 +02:00
parent 3c636406af
commit 479cc1fa0f
5 changed files with 592 additions and 1193 deletions
--- a/virtweb_frontend/src/widgets/forms/FileInput.tsx
+++ b/virtweb_frontend/src/widgets/forms/FileInput.tsx
@ -0,0 +1,75 @@
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import ClearIcon from "@mui/icons-material/Clear";
+import {
+  IconButton,
+  InputAdornment,
+  OutlinedInputProps,
+  TextField,
+  TextFieldSlotsAndSlotProps,
+  Tooltip,
+} from "@mui/material";
+import { filesize } from "filesize";
+import React from "react";
+
+export function FileInput(
+  p: {
+    label?: string;
+    value: File | null;
+    onChange: (file: File | null) => void;
+    style?: React.CSSProperties;
+  } & TextFieldSlotsAndSlotProps<OutlinedInputProps>
+): React.ReactElement {
+  const fileInput = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <TextField
+      onClick={() => fileInput.current?.click()}
+      {...p}
+      value={""}
+      onChange={() => {}}
+      type="file"
+      slotProps={{
+        input: {
+          startAdornment: (
+            <>
+              <InputAdornment position="start">
+                <AttachFileIcon />
+                &nbsp;&nbsp;
+                {p.value ? p.value.name : "Insert a file"}
+              </InputAdornment>
+            </>
+          ),
+          endAdornment: p.value ? (
+            <InputAdornment position="end">
+              {filesize(p.value.size)}
+              <Tooltip
+                title="Remove attached file"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    p.onChange(null);
+                  }}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ) : undefined,
+
+          onChange: (e) => {
+            const files = (e.target as any).files;
+            p.onChange(files.length > 0 ? files[0] : null);
+          },
+        },
+        htmlInput: {
+          ref: fileInput,
+          style: { opacity: 0 },
+        },
+      }}
+      placeholder={"Insert a file"}
+      variant="outlined"
+    />
+  );
+}