...

1 files changed, 36 insertions, 0 deletions

diff --git a/Timeline/ClientApp/src/app/views/common/FileInput.tsx b/Timeline/ClientApp/src/app/views/common/FileInput.tsx
new file mode 100644
index 00000000..7b053d5c
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/common/FileInput.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import clsx from "clsx";
+
+export interface FileInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id"> {
+  inputId?: string;
+  labelText: string;
+  color?: string;
+  className?: string;
+}
+
+const FileInput: React.FC<FileInputProps> = (props) => {
+  const { inputId, labelText, color, className, ...otherProps } = props;
+
+  const realInputId = React.useMemo<string>(() => {
+    if (inputId != null) return inputId;
+    return (
+      "file-input-" +
+      (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+    );
+  }, [inputId]);
+
+  return (
+    <>
+      <input className="d-none" type="file" id={realInputId} {...otherProps} />
+      <label
+        htmlFor={realInputId}
+        className={clsx("btn", "btn-" + (color ?? "primary"), className)}
+      >
+        {labelText}
+      </label>
+    </>
+  );
+};
+
+export default FileInput;