Fixed Add Images for new backend endpoint.

Author: EvieePy

mystbin/frontend/components/EditorTabs.tsx

@@ -14,6 +14,7 @@ import React from "react";
 import SettingsIcon from "@material-ui/icons/Settings";
 import AddBoxIcon from '@material-ui/icons/AddBox';
 import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
+import {ImageRounded} from "@material-ui/icons";
 
 const languages = {
   py: "python",
@@ -188,8 +189,9 @@ export default function EditorTabs({
     <>
       <div>
       {value.map((v, i) => (
-          <div className={styles.attachmentImageBackdrop} onClick={(e) => setShowImage(-1)} style={{ display: showImage === i ? "block" : "none",}}>
+          <div className={styles.attachmentImageBackdrop} onClick={(e) => setShowImage(-1)} style={{ display: showImage === i ? "flex" : "none",}}>
             <img className={styles.attachmentImage} src={value[i]['image']} style={{ display: showImage === i ? "block" : "none",}}/>
+            <a className={styles.attachmentLink} href={value[i]['image']} target={"_blank"}>Open Original</a>
           </div>
         ))}
       </div>
@@ -234,20 +236,22 @@ export default function EditorTabs({
               </div> : null}
 
               { value[i]['image'] ?
-                  <div className={styles.addImageButtonContainer} onClick={(e) => setShowImage(i)}>
-                  <LibraryAddCheckIcon style={{color: "#E3E3E3"}}/>
+                  <div
+                      className={styles.addImageButtonContainer}
+                      onClick={() => setShowImage(i)}
+                  >
+                    <ImageRounded className={styles.addImagesButtonNS}/>
                   </div>
                   : null }
 
               {!!pid ? (
                 <div className={styles.dropdownContainer} ref={tabRef}>
-                  <Button
-                    type="submit"
+                  <div
                     className={styles.langButton}
                     onClick={() => setLangDropDown(!langDropDown)}
                   >
                     <SettingsIcon />
-                  </Button>
+                  </div>
                   {langDropDown ? (
                     <div className={styles.langParent}>
                       <Dropdown className={styles.dropDown} autoClose>

mystbin/frontend/components/OptsBar.tsx

@@ -39,33 +39,6 @@ export default function OptsBar() {
 
   const [uploaded, setUploaded] = useState(false)
 
-  function handleFileUploads(id) {
-    let paste = pasteStore.getPaste();
-    let FD = new FormData();
-
-    for (const [index, element] of paste.entries()) {
-      if (element['image'] === null || element['image'] == undefined) {
-        continue
-      }
-      else {
-        let name = `${index}-${id}-${element['image'].name}`
-        FD.append('images', element['image'], name)
-      }
-
-      if (FD.entries().next().done === true) {
-        setUploaded(true)
-        return
-      }
-    }
-
-    axios({
-        url: `${config['site']['backend_site']}/images/upload/${id}`,
-        method: 'PUT',
-        data: FD,
-      }).then((response) => {
-        setUploaded(true);
-      })
-    }
 
   const personal = [
     {
@@ -164,32 +137,49 @@ export default function OptsBar() {
 
         setSaving(true);
         let files = [];
+        let FD = new FormData();
 
         for (let file of paste) {
-          files.push({ filename: file["title"], content: file["content"] });
+          if (file['image'] === null || file['image'] == undefined) {
+            files.push({ filename: file["title"], content: file["content"] });
+          }
+          else {
+            files.push({ filename: file["title"], content: file["content"], attachment: file['image'].name });
+            FD.append('images', file['image'], file['image'].name)
+          }
         }
 
+        let data = { "files": files, "password": paste.password }
+        FD.append('data', JSON.stringify(data))
+
         const headers = {
-          "Content-Type": "application/json",
+          "Content-Type": "multipart/form-data",
         };
+
         if (!!cookieCutter.get("auth")) {
           headers["Authorization"] = cookieCutter.get("auth");
         }
-        fetch(config["site"]["backend_site"] + "/paste", {
-          method: "PUT",
+
+        axios( {
+          url: config["site"]["backend_site"] + "/rich-paste",
+          method: "POST",
           headers: headers,
-          body: JSON.stringify({ files: files, password: paste.password }),
+          data: FD,
         })
           .then((r) => {
             if (r.status === 201) {
-              return r.json();
+              return r.data;
             }
             setSaving(false);
+            setUploaded(false);
+
             console.error(r.status);
+            console.log(r.data)
           })
           .then((d) => {
+            setUploaded(true);
+
             if (d && d.id) {
-              handleFileUploads(d.id)
 
               let path = `/${d.id}`;
               let full = window.location.origin + path;
@@ -198,7 +188,7 @@ export default function OptsBar() {
                 setSaveSuccessToast(d.id);
                 setTimeout(() => {
                   router.push(path);
-                }, 6000);
+                }, 3000);
               });
             }
           });

mystbin/frontend/package.json

@@ -10,10 +10,14 @@
     "launch": "next build && next start"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/x-grid": "^4.0.0-alpha.37",
     "@monaco-editor/react": "^3.7.0",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "@types/crypto-js": "^4.0.1",
     "@types/node": "*",
     "@types/react": "18.0.1",
@@ -27,6 +31,7 @@
     "flux": "^4.0.1",
     "http-proxy": "^1.18.1",
     "install": "^0.13.0",
+    "mui-datatables": "^4.2.2",
     "next": "^11.0.0",
     "react": "17.0.1",
     "react-bootstrap": "^2.5.0",

mystbin/frontend/pages/[pid].tsx

@@ -22,7 +22,7 @@ export default function Pastey(props: PropsWithoutRef<{ paste }>) {
     });
   } else {
     for (let file of paste["files"]) {
-      initialData.push({ title: file["filename"], content: file["content"], image: file['image'] });
+      initialData.push({ title: file["filename"], content: file["content"], image: file['attachment'] });
     }
   }
 

mystbin/frontend/styles/EditorTabs.module.css

@@ -29,7 +29,7 @@
   display: flex;
   align-self: center;
   justify-content: center;
-  margin: -1rem!important;
+  padding: 0.5rem;
 }
 
 .langButton:hover {
@@ -83,7 +83,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem
+  padding: 0.5rem;
 }
 
 .addImagesButtonNS {
@@ -100,17 +100,31 @@
 
 .attachmentImageBackdrop {
   position: fixed;
+  display: flex;
+  flex-direction: column;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 9;
+  z-index: 7;
+  justify-content: center;
 }
 
 .attachmentImage {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  align-self: center;
+  justify-self: center;
   z-index: 8;
-  max-width: 100%;
+  max-height: 60%;
+}
+
+.attachmentLink {
+  color: #e3e3e3;
+  z-index: 8;
+  align-self: center;
+  text-decoration: none;
+}
+
+.attachmentLink:hover {
+  filter: brightness(120%);
+  color: #e3e3e3;
+  cursor: pointer;
 }

mystbin/frontend/styles/globals.css

@@ -217,4 +217,18 @@ input[type=radio] {
 /* Handle */
 .dropdown::-webkit-scrollbar-thumb {
   background: #0070f3;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(200, 200, 255, 0.3);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #3b3b3b;
 }