refactor: upload Modal

src/common/component/UploadModal/FileItem.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import { formatBytes, isTreatAsImage, getFileIcon } from "../../utils";
+
+export default function FileItem({ file = null }) {
+  const [icon, setIcon] = useState(null);
+  useEffect(() => {
+    if (file) {
+      const { type, name } = file;
+      if (isTreatAsImage(file)) {
+        setIcon(
+          <img src={URL.createObjectURL(file)} alt="thumb" className="thumb" />
+        );
+        return;
+      }
+      console.log("file type", type, name);
+      setIcon(getFileIcon(type, name));
+    }
+  }, [file]);
+  console.log("current file", file);
+  if (!file) return null;
+  const { name, size } = file;
+  return (
+    <li className="item">
+      {icon}
+      <div className="right">
+        <div className="name">
+          <span className="input">{name}</span>
+          {/* <i className="tip">(click title to change name)</i> */}
+        </div>
+        <i className="size">{formatBytes(size)}</i>
+      </div>
+    </li>
+  );
+}