[REF]: Saving changes before past tarvel to recover file-item/utils/getLocalFileItemData.ts

Author: JinSSJ3

src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx

@@ -16,9 +16,9 @@ const DemoDropzoneUploading = ({ button }) => {
   const removeFile = (id) => {
     setFiles(files.filter((x) => x.id !== id));
   };
-  const handleFinishUpload=(uploadedFiles)=>{
+  const handleFinishUpload = (uploadedFiles) => {
     console.log("Upload has finished", uploadedFiles);
-  }
+  };
   if (button)
     return (
       <div
@@ -38,7 +38,7 @@ const DemoDropzoneUploading = ({ button }) => {
           maxFileSize={28 * 1024 * 1024}
           maxFiles={2}
           actionButtons={{
-            position: "bottom",
+            position: "after",
             uploadButton: {},
             abortButton: {},
           }}
@@ -65,7 +65,13 @@ const DemoDropzoneUploading = ({ button }) => {
             }}
           >
             {files.map((file) => (
-              <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+              <FileCard
+                key={file.id}
+                {...file}
+                onDelete={removeFile}
+                info
+                preview
+              />
             ))}
           </div>
         )}
@@ -78,7 +84,7 @@ const DemoDropzoneUploading = ({ button }) => {
       accept={"image/*"}
       maxFileSize={28 * 1024 * 1024}
       maxFiles={2}
-      actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+      actionButtons={{ position: "after", uploadButton: {}, abortButton: {} }}
       uploadConfig={{
         url: "https://www.myawsomeserver.com/upload",
         method: "POST",
@@ -92,8 +98,14 @@ const DemoDropzoneUploading = ({ button }) => {
       fakeUpload
     >
       {files.map((file) => (
-          <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
-        ))}
+        <FileMosaic
+          key={file.id}
+          {...file}
+          onDelete={removeFile}
+          info
+          preview
+        />
+      ))}
     </Dropzone>
   );
 };

src/pages/MainPage.jsx

@@ -8,7 +8,6 @@ import GettingStarted from "../components/MainPage/GettingStarted";
 import MainNavBar from "../components/MainPage/MainNavBar";
 import MainFooter from "../components/MainPage/MainFooter";
 import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileMosaicImageVideoPreviews";
-//import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
 import { Divider } from "@mui/material";
 import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
 import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";

src/pages/server-side/ServerSidePage.tsx

@@ -8,7 +8,9 @@ import MainTitle from "../../components/main-title/MainTitle";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
 import AnchorToTab from "../../components/util-components/AnchorToTab";
-
+import { FileMosaic } from "../../files-ui";
+import expressjslogo from "../../static/serverside/expressjslogo.webp";
+import javalogo from "../../static/serverside/springbootjavalogo.png";
 const ServerSidePage = () => {
   return (
     <React.Fragment>
@@ -25,25 +27,57 @@ const ServerSidePage = () => {
           </DescParagraph>
           <section id="expressjs">
             <SubTitle content="Express JS" />
-            <DescParagraph>
-              The following code is just the main part of a project. Check it up
-              in the following{" "}
-              <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
-                here
-              </AnchorToTab>
-              .
-            </DescParagraph>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "revert",
+                flexWrap: "nowrap",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <DescParagraph>
+                The following code is just the main part of a project. Check it
+                up in the following{" "}
+                <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
+                  link
+                </AnchorToTab>
+                .
+              </DescParagraph>
+              <FileMosaic
+                {...logoExpress}
+                onClick={() => {
+                  alert("open");
+                }}
+              />
+            </div>
           </section>
           <section id="springboot">
             <SubTitle content="Java - Spring boot" />{" "}
-            <DescParagraph>
-              The following code is just the main part of a project. Check it up
-              in the following{" "}
-              <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
-                here
-              </AnchorToTab>
-              .
-            </DescParagraph>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "revert",
+                flexWrap: "nowrap",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <DescParagraph>
+                The following code is just the main part of a project. Check it
+                up in the following{" "}
+                <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
+                  link
+                </AnchorToTab>
+                .
+              </DescParagraph>
+              <FileMosaic
+                {...logoJava}
+                onClick={() => {
+                  alert("open");
+                }}
+              />
+            </div>
           </section>
         </MainContentContainer>
         <RightMenuContainer>
@@ -67,3 +101,17 @@ const rightMenuItems = [
     referTo: "/server-side#springboot",
   },
 ];
+
+const logoExpress = {
+  id: ":0:",
+  //size: 28 * 1024 * 1024,
+  type: "image/png",
+  imageUrl: expressjslogo,
+};
+
+const logoJava = {
+  id: ":1:",
+  //size: 28 * 1024 * 1024,
+  type: "image/png",
+  imageUrl: javalogo,
+};

src/static/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.webp';
+declare module '*.mp4';