Preview local file before send

web/src/components/AttachmentIcon.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box } from "@mui/material";
+import { Box, Link } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import fileDocument from "../img/file-document.svg";
 import fileImage from "../img/file-image.svg";
@@ -32,16 +32,18 @@ const AttachmentIcon = (props) => {
     imageLabel = t("notifications_attachment_file_document");
   }
   return (
-    <Box
-      component="img"
-      src={imageFile}
-      alt={imageLabel}
-      loading="lazy"
-      sx={{
-        width: "28px",
-        height: "28px",
-      }}
-    />
+    <Link href={props.href} target="_blank">
+      <Box
+        component="img"
+        src={imageFile}
+        alt={imageLabel}
+        loading="lazy"
+        sx={{
+          width: "28px",
+          height: "28px",
+        }}
+      />
+    </Link>
   );
 };
 

web/src/components/PublishDialog.jsx

@@ -798,7 +798,7 @@ const AttachmentBox = (props) => {
           borderRadius: "4px",
         }}
       >
-        <AttachmentIcon type={file.type} />
+        <AttachmentIcon type={file.type} href={URL.createObjectURL(file)} />
         <Box sx={{ marginLeft: 1, textAlign: "left" }}>
           <ExpandingTextField
             minWidth={140}