Merge pull request #17 from files-ui/24-add-download-page-and-upload-page

24 add download page and upload page

src/components/MainMenu/MainMenuSideBar.tsx

@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
 import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
 import { useNavigateToTop } from "../../hooks/useNavigateToTop";
 
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
 export default function MainMenuSideBar(props: MainMenuSideBarProps) {
   const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
   const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
           index: 26,
           onClick: () => navigate("/components/fullscreen"),
         },
-       
       ],
     },
     {
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 5,
       onClick: () => navigate("/localization"),
     },
-    {
-      label: "Server side",
-      index: 6,
-      onClick: () => navigate("/server-side"),
-    },
-    {
+    /* {
       label: "Code Generator",
       index: 7,
       onClick: () => navigate("/code-generator"),
-    },
+    }, */
     {
       label: "Types",
-      index: 8,
+      index: 7,
       onClick: () => navigate("/types"),
     },
     {
-      label: "Utilities Methods",
-      index: 9,
-      subMenu: [
-        {
-          label: "File readers",
-          index: 81,
-          onClick: () => navigate("/utilities-methods/file-reader"),
+      label: "Server side",
+      index: 6,
+      onClick: () => navigate("/server-side"),
     },
-
-        {
-          label: "File uploader",
-          index: 82,
-          onClick: () => navigate("/utilities-methods/file-uploader"),
+   /*  {
+      label: "File readers",
+      index: 8,
+      onClick: () => navigate("/file-reader"),
     },
-
+ */
     {
       label: "File download",
-          index: 83,
-          onClick: () => navigate("/utilities-methods/file-downloader"),
-        },
-      ],
+      index: 9,
+      onClick: () => navigate("/file-download"),
     },
   ];
 
@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
     })
   );
 
+
   /*   const handleClick = () => {
     //setOpen(!open);
   }; */
@@ -187,19 +178,36 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
   }; */
 
   //const [selectedIndex, setSelectedIndex] = React.useState(1);
-
+  function handler(ev:React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    console.log('CTRL pressed during click:', ev.ctrlKey);
+  }
   const handleListItemClick = (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     index: number,
     onClick: Function | undefined,
     withSubMenu?: boolean
   ) => {
+    handler(event);
+    
     //setSelectedIndex(index);
+    console.log("newIndex",index, withSubMenu);
     if (!withSubMenu) {
       onClick?.();
     } else {
       setRegularItemsIni((arr) =>
         arr.map((item) => {
+      /*     if (item.subMenu) {
+            const newSubMenu = item.subMenu.map((x) => {
+              if (x.index === index) {
+                return { ...x , };
+              } else {
+                return { ...x };
+              }
+            });
+            return { ...item, subMenu: newSubMenu };
+          } else */
+          
+         
           if (item.index === index) {
             return { ...item, isOpen: !item.isOpen };
           }
@@ -300,7 +308,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                   style={{ padding: "2px 20px" }}
                   key={indexBase}
                   // selected={subMenu === undefined && selectedIndex === index}
-                  selected={isOpen && selectedIndex === index}
+                  selected={
+                    (subMenu === undefined || isOpen) && selectedIndex === index
+                  }
                   onClick={(event) =>
                     handleListItemClick(
                       event,
@@ -321,6 +331,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                     primary={label || ""}
                     primaryTypographyProps={{ fontWeight: "600" }}
                   />
+                  {subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
                 </ListItemButton>
 
                 {subMenu && (
@@ -336,6 +347,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                           <ListItemButton
                             style={{ paddingTop: 0 }}
                             sx={{ pl: 4 }}
+                            //selected={selectedIndex === index}
                             selected={selectedIndex === index}
                             key={index2 + indexBase}
                             onClick={(event) =>

src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx

@@ -40,6 +40,7 @@ const FileMosaicImageVideoPreviews: React.FC<
     fileId: FileMosaicProps["id"],
     downloadUrl?: string
   ) => {
+    
     console.log("Download fileId", fileId);
     console.log("Download fileName", files.filter((x) => x.id === fileId)[0]);
     console.log("Download downloadUrl", downloadUrl);

src/components/demo-components/demo-download/CodeDemoDownload.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} />
+      <FileCard id={4} {...sampleFile} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;`;
+
+
+const completeCodeTS =  `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} />
+      <FileCard id={4} {...sampleFile} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;`;

src/components/demo-components/demo-download/CodeDemoDownload1.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const sampleFile = {
+  size: 28 * 1024 * 1024,
+  type: "video/mp4",
+  name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+      <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+    </>
+  );
+};
+export default DemoDownloadSameOrigin;`;
+
+
+const completeCodeTS =  `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "video/mp4",
+  name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+      <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+    </>
+  );
+};
+export default DemoDownloadSameOrigin;`;

src/components/demo-components/demo-download/CodeDemoDownload3.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoDownload1 = () => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDownload1;
+
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
+
+const completeCodeJS = `import * as React from "react";
+import { FileCard, FileMosaic } from "@files-ui/react";
+
+const outsideDownloadUrl =
+  "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+  const handleDownload = async (fileId, downloadUrl) => {
+    console.log("Download fileId", fileId);
+    console.log("Download downloadUrl", downloadUrl);
+    if (!downloadUrl) return;
+    try {
+      const image = await fetch(downloadUrl);
+      const imageBlob = await image.blob();
+      const imageURL = URL.createObjectURL(imageBlob);
+
+      const anchor = document.createElement("a");
+      anchor.href = imageURL;
+      anchor.download = sampleFile.name || "newFile.jpeg";
+
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(imageURL);
+    } catch (error) {
+      console.log("Download error", error);
+      console.error(error);
+    }
+  };
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+      <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginOnDownload;`;
+
+
+const completeCodeTS =  `import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl =
+  "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+  const handleDownload = async (
+    fileId: string | number | undefined,
+    downloadUrl?: string | undefined
+  ) => {
+    console.log("Download fileId", fileId);
+    console.log("Download downloadUrl", downloadUrl);
+    if (!downloadUrl) return;
+    try {
+      const image = await fetch(downloadUrl);
+      const imageBlob = await image.blob();
+      const imageURL = URL.createObjectURL(imageBlob);
+
+      const anchor = document.createElement("a");
+      anchor.href = imageURL;
+      anchor.download = sampleFile.name || "newFile.jpeg";
+
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(imageURL);
+    } catch (error) {
+      console.log("Download error", error);
+      console.error(error);
+    }
+  };
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+      <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginOnDownload;`;

src/components/demo-components/demo-download/DemoDownload1.tsx

+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "video/mp4",
+  name: "NarutoAndSasukevsMomoshiiki.mp4",
+};
+
+const VIDEO_URL = "/videodemo/NarutoEN.mp4";
+
+const DemoDownloadSameOrigin = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+      <FileCard id={4} {...sampleFile} downloadUrl={VIDEO_URL} />
+    </>
+  );
+};
+export default DemoDownloadSameOrigin;

src/components/demo-components/demo-download/DemoDownload2.tsx

+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl = "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginDownloadUrl = () => {
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} />
+      <FileCard id={4} {...sampleFile} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginDownloadUrl;

src/components/demo-components/demo-download/DemoDownload3.tsx

+import * as React from "react";
+import { FileCard, FileMosaic, ExtFile } from "../../../files-ui";
+
+const outsideDownloadUrl =
+  "https://steamuserimages-a.akamaihd.net/ugc/964219647714510750/C4D97B0E1ECCE3E8A505AFBC8EAD8945E2223C41/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false";
+
+const sampleFile: ExtFile = {
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor.jpeg",
+  imageUrl: outsideDownloadUrl,
+  downloadUrl: outsideDownloadUrl,
+};
+
+const DemoDownloadDifferentOriginOnDownload = () => {
+  const handleDownload = async (
+    fileId: string | number | undefined,
+    downloadUrl?: string | undefined
+  ) => {
+    console.log("Download fileId", fileId);
+    console.log("Download downloadUrl", downloadUrl);
+    if (!downloadUrl) return;
+    try {
+      const image = await fetch(downloadUrl);
+      const imageBlob = await image.blob();
+      const imageURL = URL.createObjectURL(imageBlob);
+
+      const anchor = document.createElement("a");
+      anchor.href = imageURL;
+      anchor.download = sampleFile.name || "newFile.jpeg";
+
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(imageURL);
+    } catch (error) {
+      console.log("Download error", error);
+      console.error(error);
+    }
+  };
+  return (
+    <>
+      <FileMosaic id={4} {...sampleFile} onDownload={handleDownload} />
+      <FileCard id={4} {...sampleFile} onDownload={handleDownload} />
+    </>
+  );
+};
+export default DemoDownloadDifferentOriginOnDownload;

src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoServerSideExpress = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoServerSideExpress;
+
+const splittedCodeJS = `const express = require("express");
+const fileUpload = require("express-fileupload");
+// ... some code
+app.post("/upload-my-file", async (req, res) => {
+  try {
+    if (!req.files) {
+      res.send({
+        success: false,
+        message: "There was no file found in request",
+        payload: {},
+      });
+    } else {
+      //Use the name of the input field (i.e. "file") to retrieve the uploaded file
+      let file = req.files.file;
+      //Use the mv() method to place the file in upload directory (i.e. "uploads")
+      file.mv("./uploads/" + file.name);
+      //send response
+      res.send({
+        success: true,
+        message: "File was uploaded successfuly",
+        payload: {
+          name: file.name,
+          mimetype: file.mimetype,
+          size: file.size,
+          path: "/files/uploads/",
+          url: "https://my-ftp-server.com/bjYJGFYgjfVGHVb",
+        },
+      });
+    }
+  } catch (err) {
+    res.status(500).send({
+      status: false,
+      message: "Unexpected problem",
+      payload: {},
+    });
+  }
+});`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = ``;
+
+const completeCodeTS = ``;

src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoServerSideJava = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoServerSideJava;
+
+const splittedCodeJS = `// FilesUiResponse.java
+//...imports
+public class FilesUiResponse {
+    Boolean success;
+    String message;
+    Object payload;
+//..more code
+}
+
+// FileUploadController.java
+//...imports
+@CrossOrigin(origins = "*")
+@RestController
+public class FileUploadController {
+    //..more code
+    @PostMapping("/file")
+    public ResponseEntity<FilesUiResponse> uploadFile(
+            @RequestParam("file") MultipartFile multipartFile
+    ) {
+        try {
+            FileItem resultFileItem = FileUploadUtil.saveFileInDir(multipartFile);
+            FilesUiResponse response = new FilesUiResponse(
+                    true,
+                    "Files upladed successfully",
+                    resultFileItem);
+            return new ResponseEntity<>(response, HttpStatus.OK);
+        } catch (IOException ioe) {
+            FilesUiResponse response = new FilesUiResponse(
+                    false,
+                    "Error on upload",
+                    null);
+            System.out.println(ioe.getMessage());
+            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
+        }
+    }
+    //... more code
+}
+
+// FileUploadUtil.java
+public class FileUploadUtil {
+    public static String UPLOAD_PATH = "Files-Upload";
+
+    public static FileItem saveFileInDir(MultipartFile multipartFile) throws IOException {
+        Path uploadDirectory = Paths.get(UPLOAD_PATH);
+
+        String fileId = createUUID();
+        String fileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());
+
+        String extention = FileUploadUtil.getExtensionByStringHandling(fileName).get();
+
+        String finalFileName = createUUIDfileName(extention);
+        String mimeType = multipartFile.getContentType();
+
+        checkDircectoryIfExists(uploadDirectory);
+        long size = multipartFile.getSize();
+
+
+        System.out.println("fileName: " + fileName);
+        System.out.println("newFIleName: " + finalFileName);
+        System.out.println("extention: " + extention);
+        System.out.println("size: " + size);
+
+        try (InputStream inputStream = multipartFile.getInputStream()) {
+            Path filePath = uploadDirectory.resolve(fileName);
+
+            Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING);
+
+            FileItem finalFileItem = new FileItem(
+                    fileId,
+                    finalFileName,
+                    size,
+                    mimeType,
+                    "./UPLOAD_PATH"
+            );
+
+            // add to database here...
+
+            return finalFileItem;
+        } catch (IOException ioe) {
+            throw new IOException("Error on saving uploaded file: " + fileName, ioe);
+        }
+    }
+    public static String createUUID() {
+        UUID uuid = UUID.randomUUID();
+        String fileId = uuid.toString();
+        return fileId;
+    }
+
+    public static String createUUIDfileName(String extention) {
+        return createUUID() + "." + extention;
+    }
+
+    // more code...
+}
+
+// FileItem.java
+// ..imports
+public class FileItem {
+
+    public FileItem() { }
+
+    public FileItem(String idFileItem, String name, long size, String mimeType, String path) {
+        this.idFileItem = idFileItem;
+        this.name = name;
+        this.size=size;
+        this.mimeType = mimeType;
+        this.path = path;
+        this.creationTime = new Date();
+        this.status = true;
+    }
+    @JsonIgnore
+    private String idFileItem;
+
+    private long size;
+
+    @JsonProperty("type")
+    private String mimeType;
+
+    private String name;
+
+    @JsonIgnore
+    private String path;
+
+    private Date creationTime;
+
+    @JsonIgnore
+    private Boolean status;
+
+    //more code...
+}
+`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = ``;
+
+const completeCodeTS = ``;

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

@@ -18,7 +18,7 @@ const DemoDropzoneUploading = ({ button }) => {
   };
   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,7 +98,13 @@ 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/components/layout-pages/FooterPage.scss

+.fui-page-footer-container {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  .redirect-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .like-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: "960px") {
+    .redirect-container {
+      display: none;
+    }
+    .redirect-small-container {
+      display: flex;
+    }
+    .like-icon-container {
+      width: 100%;
+    }
+  }
+}

src/components/layout-pages/FooterPage.tsx

+import { Button, Divider } from "@mui/material";
+import * as React from "react";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { useNavigate } from "react-router";
+import "./FooterPage.scss";
+
+interface FooterPageProps {
+  labelBefore?: string;
+  labelAfter?: string;
+  linkBefore?: string;
+  linkAfter?: string;
+  page: string;
+}
+const FooterPage: React.FC<FooterPageProps> = (props: FooterPageProps) => {
+  const { labelAfter, labelBefore, linkAfter, linkBefore, page } = props;
+  const redirect = useNavigate();
+  return (
+    <footer>
+      <Divider style={{ width: "100%" }}></Divider>
+      <div className="fui-page-footer-container">
+        <div className="redirect-small-container">
+          {labelBefore && (
+            <Button
+              startIcon={<KeyboardArrowLeftIcon />}
+              onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+            >
+              {labelBefore}
+            </Button>
+          )}
+          {labelAfter && (
+            <Button
+              endIcon={<KeyboardArrowRightIcon />}
+              onClick={labelAfter ? () => redirect(labelAfter) : undefined}
+            >
+              {labelAfter}
+            </Button>
+          )}
+        </div>
+
+        <div className="redirect-container">
+          {labelBefore && (
+            <Button
+              startIcon={<KeyboardArrowLeftIcon />}
+              onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+            >
+              {labelBefore}
+            </Button>
+          )}
+        </div>
+
+        <div className="like-icon-container">like icons</div>
+        <div className="redirect-container">
+          {labelAfter && (
+            <Button
+              endIcon={<KeyboardArrowRightIcon />}
+              onClick={linkAfter ? () => redirect(linkAfter) : undefined}
+            >
+              {labelAfter}
+            </Button>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterPage;

src/components/layout-pages/MainContentContainer.jsx

@@ -22,6 +22,7 @@ const MainContentContainer = ({ children }) => {
         }}
       >
         {children}
+        
       </Box>
     </Box>
   );

src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx

@@ -77,8 +77,9 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
 
     const maxFileSizeMessenger: FunctionLabel =
       DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
-    if (maxFileSize) {
-      result.push(maxFileSizeMessenger(fileSizeFormater(maxFileSize)));
+    const maxFileSizeFormatted = fileSizeFormater(maxFileSize);
+    if (maxFileSizeFormatted) {
+      result.push(maxFileSizeMessenger(maxFileSizeFormatted));
       result.push(<React.Fragment>{","}&nbsp;</React.Fragment>);
     }
     const validFileSizeMessenger: FunctionLabel =

src/files-ui/components/file-card/FileCard.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
 import "./components/FileCardPaper.scss";
-import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
-import { fileSizeFormater, handleClickUtil, shrinkWord } from "../../core";
+import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
 import useProgress from "../file-mosaic/hooks/useProgress";
 import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
 import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
@@ -147,9 +146,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     videoUrl
   );
   //The size formatted and rounded in 2 decimals
-  const sizeFormatted: string = localSize
-    ? fileSizeFormater(localSize)
-    : "0 KB";
+  const sizeFormatted: string | undefined = fileSizeFormater(localSize);
 
   //alwaysActive
   const [showInfo, setShowInfo] = React.useState<boolean>(false);

src/files-ui/components/file-item/components/FileItem/FileItem.scss

-@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
-
-.file-item-full-container-container {
-  cursor: text;
-  box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
-  width: 132px;
-  word-break: break-word;
-  font-size: 15px;
-  font-weight: 400;
-  //background-color: cadetblue;
-
-  &.hovering {
-    // background-color: aqua;
-    border-radius: 8px;
-  }
-
-  //outline: 1px solid rgb(20, 130, 220);
-  .file-item-icon-container {
-    position: relative;
-    height: 132px;
-    width: 132px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .full-info {
-      &::-webkit-scrollbar {
-        width: 9px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #646c7fa9;
-        border-radius: 20px;
-        border: transparent;
-      }
-
-      text-align: left;
-      position: absolute;
-      left: 0;
-      top: 0;
-
-      scrollbar-width: thin;
-      line-height: 1.5;
-      letter-spacing: 0.02857em;
-      //border: 1px solid white;
-      font-family: "Poppins", sans-serif;
-      width: inherit;
-      background-color: rgba(0, 0, 0, 0.85);
-      word-break: break-word;
-      //margin: 1% 4%;
-      // padding: 1% 1%;
-      border-radius: 7px;
-      //z-index: 100;
-      height: 100%;
-      width: 100%;
-
-      font-size: 0.8rem;
-      transition: all 0.5s ease 0s;
-      //overflow: hidden;
-      overflow: auto;
-      color: white;
-
-      .name {
-        //margin: -7px 0 0 0;
-        padding: 0 5px;
-        font-weight: 399;
-        // text-align: center;
-
-        .sub-label {
-          font-weight: 600;
-        }
-
-        &.success {
-          border: 1px dashed #2e7d32;
-          background-color: #1b5e20;
-          //margin: 0 2px;
-          font-size: 0.7rem;
-
-          border-radius: 4px;
-        }
-
-        &.error {
-          background-color: #c62828;
-          border: 1px dashed #d32f2f;
-          font-size: 0.7rem;
-
-          //margin: 0 2px;
-          border-radius: 4px;
-        }
-      }
-
-      .size {
-        // margin-top: 5px;
-        padding: 0 5px;
-        font-weight: 500;
-
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-
-      .mime {
-        //display: none;
-        //text-align: left;
-
-        padding: 0 5px;
-        font-weight: 399;
-
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-
-      &.hide {
-        //height: 0%;
-        display: none;
-      }
-    }
-  }
-
-  .file-item-name {
-    margin-top: 3px;
-    height: 31px;
-    text-align: center;
-    //width: 133px;
-    width: 100%;
-    color: black;
-    //font-size: 0.95rem;
-    font-size: 15px;
-    //line-height: 0.9rem;
-    line-height: 15px;
-    font-weight: 400;
-    letter-spacing: 0.07rem;
-    word-break: break-all;
-    padding: 0.5px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2; /* number of lines to show */
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    &.dark-mode {
-      color: rgba(255, 255, 255, 0.7);
-    }
-    &.not-allowed {
-      background-color: rgba(180, 16, 16, 0.7);
-    }
-  }
-}
-
-.file-item-container {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.dui-file-item-icon {
-  font-size: 0.7rem;
-  //border: 1px solid wheat;
-  //color: white;
-  min-width: 19px;
-  min-height: 19px;
-  margin: 0;
-  padding: 2px 2px;
-  border-radius: 50%;
-  background-color: rgba(32, 33, 36, 0.65);
-
-  word-break: break-word;
-
-  &:hover {
-    background-color: rgba(32, 33, 36, 0.85);
-    //outline: 0.5px solid wheat;
-  }
-}
-
-//////////////////   TOOLTIP
-.dz-ui-file-item-container {
-  &.dz-ui-tooltip {
-    cursor: default;
-    position: relative;
-    display: inline-block;
-
-    // border-bottom: 1px dotted black;
-    &:hover {
-      z-index: 2;
-
-      .dropzone-ui-tooltiptext {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-      }
-    }
-
-    .dropzone-ui-tooltiptext {
-      font-family: "Poppins", sans-serif;
-      font-size: 0.8rem;
-      visibility: hidden;
-      width: 133px;
-      // background-color: green;
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 2px 2px;
-      position: absolute;
-      //z-index: 2;
-      //top: 190px;
-      top: 180px;
-      left: 66px;
-      margin-left: -60px;
-
-      /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
-      opacity: 0;
-      transition: opacity 1s;
-
-      &.not-valid-error {
-        background: linear-gradient(to top, #c62828, #d32f2f);
-
-        &::after {
-          border-color: transparent transparent #d32f2f transparent;
-        }
-      }
-
-      &.success {
-        //background-color: green;
-        background: linear-gradient(to top, #1b5e20, #2e7d32);
-
-        &::after {
-          border-color: transparent transparent #2e7d32 transparent;
-        }
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        //border-color: transparent transparent green transparent;
-      }
-    }
-  }
-
-
-
-  
-  &.dz-ui-paper-elevation-1 {
-    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-      0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-2 {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-3 {
-    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-      0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-4 {
-    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  }
-}