[WIP][FEAT][MVP]: Add Server side page sample

src/components/MainMenu/MainMenuSideBar.tsx

@@ -178,13 +178,17 @@ 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) {

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/pages/server-side/ServerSidePage.tsx

+import { Paper } from "@mui/material";
 import * as React from "react";
+import CodeDemoServerSideJava from "../../components/demo-components/demo-server-side/CodeDemoServerSideJava";
+import CodeDemoServerSideExpress from "../../components/demo-components/demo-server-side/CodeDemoServerSideExpress";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
 import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -11,6 +14,7 @@ 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";
+import { redirect } from "../../utils/redirect";
 const ServerSidePage = () => {
   return (
     <React.Fragment>
@@ -18,66 +22,88 @@ const ServerSidePage = () => {
         <MainContentContainer>
           <MainTitle>Server Side implementations</MainTitle>
           <MainParagraph>
-            Some implementations for handling correctly the uploaded files using
-            Files UI.
+            Some implementations to correctly handle uploaded files using Files
+            UI.
           </MainParagraph>
           <DescParagraph>
-            If you think there should be added more of them or you want to add
-            your own in any other programming language, please contact us.
+            <ul>
+              <li>
+                If you think more server-side samples should be added or would
+                like to contribute by fixing or adding a new server-side sampler
+                in programming languages not yet covered, please contact us.
+              </li>
+            </ul>
           </DescParagraph>
           <section id="expressjs">
             <SubTitle content="Express JS" />
-            <div
+            <Paper
+              variant="outlined"
               style={{
                 display: "flex",
-                flexDirection: "revert",
+                flexDirection: "row",
                 flexWrap: "nowrap",
                 alignItems: "center",
-                justifyContent: "space-between",
+                padding: "25px",
+                justifyContent: "space-evenly",
               }}
             >
+              <FileMosaic
+                {...logoExpress}
+                onClick={() =>
+                  redirect(
+                    "https://github.com/files-ui/files-ui-web-test/tree/master/expressjs"
+                  )
+                }
+                {...logoExpress.extraData}
+                smartImgFit={"center"}
+              />{" "}
               <DescParagraph>
-                The following code is just the main part of a project. Check it
-                up in the following{" "}
+                The following code is just the main part of a project.
+                <br />
+                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>
+            </Paper>
+            <CodeDemoServerSideExpress splittedOnly/>
           </section>
           <section id="springboot">
             <SubTitle content="Java - Spring boot" />{" "}
-            <div
+            <Paper
+              variant="outlined"
               style={{
                 display: "flex",
                 flexDirection: "revert",
                 flexWrap: "nowrap",
                 alignItems: "center",
-                justifyContent: "space-between",
+                justifyContent: "space-evenly",
+                padding: "25px",
               }}
             >
+              <FileMosaic
+                {...logoJava}
+                onClick={() =>
+                  redirect(
+                    "https://github.com/files-ui/files-ui-web-test/tree/master/springboot"
+                  )
+                }
+              />{" "}
               <DescParagraph>
-                The following code is just the main part of a project. Check it
-                up in the following{" "}
+                The following code is just the main part of a project.
+                <br />
+                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>
+            </Paper>
+            <CodeDemoServerSideJava splittedOnly/>
           </section>
         </MainContentContainer>
         <RightMenuContainer>
@@ -107,6 +133,10 @@ const logoExpress = {
   //size: 28 * 1024 * 1024,
   type: "image/png",
   imageUrl: expressjslogo,
+  name: "Click me!",
+  extraData: {
+    backgroundBlurImage: false,
+  },
 };
 
 const logoJava = {
@@ -114,4 +144,5 @@ const logoJava = {
   //size: 28 * 1024 * 1024,
   type: "image/png",
   imageUrl: javalogo,
+  name: "Click me!",
 };

src/utils/redirect.js

+export const redirect = (to = "") => {
+  console.log("redirectredirect", to);
+  if (to.length === 0) return;
+  const anchor = document.createElement("a");
+  anchor.href = to;
+  anchor.target = "_blank";
+  anchor.rel = "noopener noreferrer";
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+};