diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 77a26eca4a0af398e68dac4f45c15442d66153c3..23f2928b325fbe52b9a6ee3550d203e0a178b30c 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/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) {
diff --git a/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx b/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..440d97787e9845229b6f2244704efe52ec78fef3
--- /dev/null
+++ b/src/components/demo-components/demo-server-side/CodeDemoServerSideExpress.tsx
@@ -0,0 +1,58 @@
+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 = ``;
diff --git a/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx b/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7503537907e5c657de367d458ce8bf8172f03aa5
--- /dev/null
+++ b/src/components/demo-components/demo-server-side/CodeDemoServerSideJava.tsx
@@ -0,0 +1,152 @@
+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 = ``;
diff --git a/src/pages/server-side/ServerSidePage.tsx b/src/pages/server-side/ServerSidePage.tsx
index 4e4b410ff887f714db8e20e7611f5e6fd5009b35..4835b853c41953c2da22501bfd9650045a141489 100644
--- a/src/pages/server-side/ServerSidePage.tsx
+++ b/src/pages/server-side/ServerSidePage.tsx
@@ -1,4 +1,7 @@
+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!",
};
diff --git a/src/utils/redirect.js b/src/utils/redirect.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef57dfaaee9c4ac77e6a3eff3392569a52a4035d
--- /dev/null
+++ b/src/utils/redirect.js
@@ -0,0 +1,12 @@
+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);
+};