Updated Functionality

package.json

@@ -41,6 +41,7 @@
     "bulma-prefers-dark": "^0.1.0-beta.1",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "express-fileupload": "^1.2.1",
     "kill-port": "^1.6.1",
     "react": "^17.0.2",
     "react-bulma-components": "^4.0.7",

server/index.js

@@ -10,10 +10,77 @@ const os = require("os");
 const express = require("express");
 const cors = require("cors");
 const bodyParser = require("body-parser");
+const fileUpload = require("express-fileupload");
+
+if (!fs.existsSync(path.join(os.homedir(), ".craftions_files"))) {
+  fs.mkdirSync(path.join(os.homedir(), ".craftions_files"));
+}
+
+if (!fs.existsSync(path.join(os.homedir(), ".craftions_files", "uploads"))) {
+  fs.mkdirSync(path.join(os.homedir(), ".craftions_files", "uploads"));
+}
 
 const app = express();
 
-app.use(express.static(path.join(__dirname, "..", "dist")));
+app.use("/", express.static(path.join(__dirname, "..", "dist")));
+
+app.use(fileUpload());
+
+app.use(
+  "/file",
+  express.static(path.join(os.homedir(), ".craftions_files", "uploads"))
+);
+
+app.post("/api/upload", (req, res) => {
+  let uploadFile;
+  let uploadPath;
+
+  if (!req.files || Object.keys(req.files).length === 0) {
+    return res.status(400).send("No files were uploaded.");
+  }
+
+  uploadFile = req.files.uplFile;
+
+  let uploadName = "";
+  let f = false;
+  while (!f) {
+    uploadName = randomString(10);
+    if (
+      !fs.existsSync(
+        path.join(
+          os.homedir(),
+          ".craftions_files",
+          "uploads",
+          uploadName,
+          uploadFile.name
+        )
+      )
+    ) {
+      f = true;
+    }
+  }
+
+  fs.mkdirSync(
+    path.join(os.homedir(), ".craftions_files", "uploads", uploadName)
+  );
+
+  uploadPath = path.join(
+    os.homedir(),
+    ".craftions_files",
+    "uploads",
+    uploadName,
+    uploadFile.name
+  );
+
+  uploadFile.mv(uploadPath, function (err) {
+    if (err) return res.status(500).send(err);
+    res.end(
+      "<script>window.location.assign('/success?url=" +
+        encodeURIComponent("/file/" + uploadName + "/" + uploadFile.name) +
+        "')</script>"
+    );
+  });
+});
 
 app.get("*", (req, res) => {
   res.sendFile(path.join(__dirname, "../dist/index.html"));
@@ -23,3 +90,14 @@ app.use(cors());
 app.use(bodyParser());
 
 app.listen(3000, "0.0.0.0");
+
+function randomString(length) {
+  let result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}

src/Routes.tsx

@@ -8,13 +8,17 @@ import { Route, Switch } from "react-router-dom";
 import Home from "./views/Home/Home";
 import NotFound from "./views/NotFound/NotFound";
 import Abuse from "./views/Abuse/Abuse";
+import Share from "./views/Share/Share";
+import Success from "./views/Success/Success";
 
 export default function Routes() {
   return (
     <>
       <Switch>
         <Route path={"/"} exact component={Home} />
         <Route path={"/abuse"} exact component={Abuse} />
+        <Route path={"/share"} exact component={Share} />
+        <Route path={"/success"} exact component={Success} />
         <Route path="*" component={NotFound} />
       </Switch>
     </>

src/components/NavigationBar/NavigationBar.tsx

@@ -50,8 +50,8 @@ export default function NavigationBar() {
           <Navbar.Item renderAs={Link} to={"/"}>
             Home
           </Navbar.Item>
-          <Navbar.Item renderAs={Link} to={"/"}>
-            Upload
+          <Navbar.Item renderAs={Link} to={"/share"}>
+            Share
           </Navbar.Item>
           <Navbar.Item renderAs={Link} to={"/abuse"}>
             Report

src/views/Home/Home.tsx

@@ -16,7 +16,7 @@ export default function Home() {
         image={logo}
         imageStyle={{ width: "256px" }}
       >
-        <Link to={"/upload"}>Share</Link> files with your friends or family.
+        <Link to={"/share"}>Share</Link> files with your friends or family.
       </RHeader>
     </>
   );

src/views/Share/Share.scss

@@ -0,0 +1,56 @@
+/**
+ * @author Ben Siebert <[email protected]>
+ * @copyright (c) 2018-2021 Ben Siebert. All rights reserved.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+.d-a{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.drag-area{
+  border: 2px dashed #fff;
+  height: 500px;
+  width: 700px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.drag-area.active{
+  border: 2px solid #fff;
+}
+.drag-area .icon{
+  font-size: 100px;
+  color: #fff;
+}
+.drag-area header{
+  font-size: 30px;
+  font-weight: 500;
+  color: #fff;
+}
+.drag-area span{
+  font-size: 25px;
+  font-weight: 500;
+  color: #fff;
+  margin: 10px 0 15px 0;
+}
+.drag-area button{
+  padding: 10px 25px;
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  outline: none;
+  background: #fff;
+  color: #5256ad;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.drag-area img{
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+}

src/views/Share/Share.tsx

@@ -0,0 +1,59 @@
+/**
+ * @author Ben Siebert <[email protected]>
+ * @copyright (c) 2018-2021 Ben Siebert. All rights reserved.
+ */
+
+import * as React from "react";
+import { useEffect } from "react";
+import "./Share.scss";
+
+export default function Share() {
+  useEffect(() => {
+    const dropArea = document.querySelector(".drag-area") as HTMLDivElement,
+      dragText = dropArea.querySelector("#upl-header") as HTMLDivElement,
+      button = dropArea.querySelector("#upl-button") as HTMLButtonElement,
+      input = dropArea.querySelector("#upl-input") as HTMLInputElement;
+    let file: Blob;
+
+    button.onclick = () => {
+      input.click();
+    };
+
+    input.addEventListener("change", function () {
+      // @ts-ignore
+      file = this.files[0];
+      dropArea.classList.add("active");
+      uploadFile();
+    });
+
+    function uploadFile() {
+      const form = document.querySelector("#upl-form") as HTMLFormElement;
+      form.submit();
+    }
+  }, []);
+
+  return (
+    <>
+      <h1 className={"title has-text-centered"}>Share Files</h1>
+      <div className="d-a">
+        <div className="drag-area">
+          <div className="icon">
+            <i className="fas fa-cloud-upload-alt" />
+          </div>
+          <header id={"upl-header"}>Upload File</header>
+          <button id={"upl-button"} className={"mt-4"}>
+            Browse File
+          </button>
+          <form
+            id={"upl-form"}
+            action={"/api/upload"}
+            method={"post"}
+            encType={"multipart/form-data"}
+          >
+            <input name="uplFile" type="file" hidden id={"upl-input"} />
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}

src/views/Success/Success.tsx

@@ -0,0 +1,30 @@
+/**
+ * @author Ben Siebert <[email protected]>
+ * @copyright (c) 2018-2021 Ben Siebert. All rights reserved.
+ */
+
+import * as React from "react";
+
+export default function Success() {
+  const usp = new URLSearchParams(location.search);
+
+  return (
+    <>
+      <h1 className="title has-text-centered">Uploaded File!</h1>
+      <h2 className="subtitle has-text-centered">
+        Your File has been uploaded! You can download your file at&nbsp;
+        <a
+          href={decodeURIComponent(usp.get("url") as string)}
+          target={"_blank"}
+          rel={"noreferrer"}
+        >
+          {location.protocol +
+            "//" +
+            location.host +
+            decodeURIComponent(usp.get("url") as string)}
+        </a>
+        .
+      </h2>
+    </>
+  );
+}

yarn.lock

@@ -287,6 +287,7 @@ __metadata:
     css-loader: ^6.4.0
     eslint: ^8.1.0
     express: ^4.17.1
+    express-fileupload: ^1.2.1
     file-loader: ^6.2.0
     html-webpack-plugin: ^5.4.0
     kill-port: ^1.6.1
@@ -2030,6 +2031,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"busboy@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "busboy@npm:0.3.1"
+  dependencies:
+    dicer: 0.3.0
+  checksum: d2bcb788c4595edca4ea2168ab8bf7f9558b627ddcec2fb6bbaf0aa6a10b63da48dce35ce56936570f330c5268a3204f7037021a310a895a8b1a223568e0cc1b
+  languageName: node
+  linkType: hard
+
 "bytes@npm:3.0.0":
   version: 3.0.0
   resolution: "bytes@npm:3.0.0"
@@ -2842,6 +2852,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dicer@npm:0.3.0":
+  version: 0.3.0
+  resolution: "dicer@npm:0.3.0"
+  dependencies:
+    streamsearch: 0.1.2
+  checksum: 9f61aea61fcd81457f1b43967af7e66415b7a31d393336fa05a29b221b5ba065b99e5cac46476b2da36eb7af7665bf8dad6f9500409116dc6a35ada183841598
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -3327,6 +3346,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"express-fileupload@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "express-fileupload@npm:1.2.1"
+  dependencies:
+    busboy: ^0.3.1
+  checksum: ccc07d77799a99e2e43ac74afddc63bb679ad9d66e3938e3785e1806a2b62bdc407ba23a1c6a21b4873e5d8e2de8e933aed547346dd611ad686057270863ad2a
+  languageName: node
+  linkType: hard
+
 "express@npm:^4.17.1":
   version: 4.17.1
   resolution: "express@npm:4.17.1"
@@ -7394,6 +7422,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"streamsearch@npm:0.1.2":
+  version: 0.1.2
+  resolution: "streamsearch@npm:0.1.2"
+  checksum: d2db57cbfbf7947ab9c75a7b4c80a8ef8d24850cf0a1a24258bb6956c97317ce1eab7dbcbf9c5aba3e6198611af1053b02411057bbedb99bf9c64b8275248997
+  languageName: node
+  linkType: hard
+
 "string-width@npm:^1.0.1":
   version: 1.0.2
   resolution: "string-width@npm:1.0.2"