Added the basis of tab attachments.

Author: EvieePy

mystbin/backend/routers/pastes.py

@@ -18,6 +18,7 @@
 """
 from __future__ import annotations
 
+import asyncio
 import datetime
 import json
 import pathlib
@@ -26,7 +27,7 @@
 from typing import Dict, List, Optional, Union
 
 from asyncpg import Record
-from fastapi import APIRouter, Response
+from fastapi import APIRouter, Response, UploadFile, File
 from fastapi.responses import UJSONResponse
 from models import errors, payloads, responses
 
@@ -53,9 +54,6 @@
 del __p, __f  # micro-opt, don't keep unneeded variables in-ram
 
 
-CF_DLURL = f"https://api.cloudflare.com/client/v4/accounts/{__config['cf_images_account']}/images/v2/direct_upload?requireSignedURLs=true"
-
-
 def generate_paste_id():
     """Generate three random words."""
     word_samples = sample(word_list, 3)
@@ -179,26 +177,41 @@ async def put_pastes(
     paste = recursive_hook(paste.dict())
     return UJSONResponse(paste, status_code=201)
 
-
-@router.get(
-    "/images/upload",
+@router.put(
+    "/images/upload/{paste_id}",
     tags=["pastes"],
-    status_code=201,
+    responses={
+        201: {"model": responses.PastePostResponse},
+        401: {"model": errors.Unauthorized},
+        404: {"model": errors.NotFound}
+    },
     include_in_schema=False,
 )
-async def get_image_upload_link(request: MystbinRequest, auth: Optional[str] = ''):
-    if auth != __config['cf_images_frontend_secret']:
-        return UJSONResponse({'error': 'Unauthorized.'}, status_code=401)
-
+@limit("postpastes")
+async def get_image_upload_link(request: MystbinRequest, paste_id: str, images: List[UploadFile] = File(...)):
     headers = {
-    'Authorization': f'Bearer {__config["cf_images_token"]}'}
+        "Content-Type": "application/octet-stream",
+        "AccessKey": f"{__config['bunny_cdn']['token']}"
+    }
+
+    for image in images:
+        await asyncio.sleep(0.1)
+
+        URL = f'https://storage.bunnycdn.com/{__config["bunny_cdn"]["hostname"]}/images/{image.filename}'
+        data = await image.read()
+
+        async with request.app.state.client.put(URL, headers=headers, data=data) as resp:
+            print(resp.status)
 
-    async with request.app.state.client.post(CF_DLURL, headers=headers) as resp:
-        data = await resp.json()
+    user = request.state.user
+    if not user:
+        return UJSONResponse({"error": "Unauthorized", "notice": "You must be signed in to use this route"}, status_code=401)
 
-    result = data['result']['uploadURL']
-    return UJSONResponse({'url': result}, status_code=201)
+    paste = await request.app.state.db.get_paste(paste_id, password)
+    if paste is None:
+        return UJSONResponse({"error": "Not Found"}, status_code=404)
 
+    return Response(status_code=201)
 
 desc = f"""Get a paste by ID.
 

mystbin/frontend/components/EditorTabs.tsx

@@ -8,12 +8,12 @@ import NewTabButton from "./NewTabButton";
 import pasteDispatcher from "../dispatchers/PasteDispatcher";
 import getLanguage from "../stores/languageStore";
 import config from "../config.json";
-import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import { Button } from "@material-ui/core";
 import DropdownItem from "react-bootstrap/DropdownItem";
 import React from "react";
-import InsertPhotoIcon from "@material-ui/icons/InsertPhoto";
 import SettingsIcon from "@material-ui/icons/Settings";
+import AddBoxIcon from '@material-ui/icons/AddBox';
+import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
 
 const languages = {
   py: "python",
@@ -68,7 +68,7 @@ export default function EditorTabs({
   pid = null,
 }: TabInfo) {
   const [value, setValue] = useState<Record<string, string>[]>([
-    { title: "file.txt", content: "" },
+    { title: "file.txt", content: "", image: null },
   ]);
   const [currTab, setCurrTab] = useState(0);
   const [charCountToast, setCharCountToast] = useState(false);
@@ -80,8 +80,33 @@ export default function EditorTabs({
   const [initialState, setInitialState] = useState(false);
   const [langDropDown, setLangDropDown] = useState(false);
   const [dropLang, setDropLang] = useState(null);
+  const [image, setImage] = useState(null)
+  const [showImage, setShowImage] = useState(null)
 
   const tabRef = useRef();
+  const imageRef = useRef();
+
+  function handleSetImage(e) {
+    let file = e.currentTarget.files[0]
+    let allowed = ['image/gif', 'image/jpeg', 'image/png', 'image/webp'];
+
+    if (!!file && !allowed.includes(file['type'])) {
+      alert('Only images are currently supported.')
+    }
+    else if (file.size / 1024 / 1024 > 4) {
+      alert('You can only upload files 4Mb in size or less.')
+    }
+    else {
+      setImage(file)
+    }
+  }
+
+  useEffect( () => {
+    let newValue = [...value];
+    newValue[currTab]['image'] = image
+
+    setValue(newValue)
+  }, [image])
 
   pasteDispatcher.dispatch({ paste: value });
   const maxCharCount = config["paste"]["character_limit"];
@@ -160,6 +185,13 @@ export default function EditorTabs({
 
   return (
     <>
+      {showImage ?
+          <div className={styles.attachmentImageBackdrop} onClick={(e) => setShowImage(false)}>
+            <img className={styles.attachmentImage} src={"https://mystbin.b-cdn.net/images/0-OffSpecificationCharm-9a0f0b7719a4f55a5e104922e4d42204.png"}/>
+          </div>
+      : null}
+      <input ref={imageRef} type="file" style={{display: 'none'}} onChange={e => handleSetImage(e)}/>
+
       <PasswordModal
         show={passwordModal}
         shake={shake}
@@ -188,6 +220,21 @@ export default function EditorTabs({
                 setValue(newValue);
               }}
             >
+              {!pid && value[i]['image'] === null ?
+              <div className={styles.addImageButtonContainer} onClick={((e) => {
+              e.preventDefault();
+              imageRef.current.click();
+
+            })} >
+                <AddBoxIcon className={styles.addImagesButtonNS} ></AddBoxIcon>
+              </div> : null}
+
+              { value[i]['image'] ?
+                  <div className={styles.addImageButtonContainer} onClick={(e) => setShowImage(true)}>
+                  <LibraryAddCheckIcon style={{color: "#E3E3E3"}}/>
+                  </div>
+                  : null }
+
               {!!pid ? (
                 <div className={styles.dropdownContainer} ref={tabRef}>
                   <Button

mystbin/frontend/components/OptsBar.tsx

@@ -36,6 +36,25 @@ export default function OptsBar() {
     !useMediaQuery({ query: `(max-width: 768px)` })
   );
 
+  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
+      }
+
+      let name = `${index}-${id}-${element['image'].name}`
+      FD.append('images', element['image'], name)
+    }
+
+    fetch(`${config['site']['backend_site']}/images/upload/${id}`, {
+      method: "PUT",
+      body: FD
+    }).then((r) => console.log(r.status))
+  }
+
   const personal = [
     {
       title: "Dashboard",
@@ -158,6 +177,8 @@ export default function OptsBar() {
           })
           .then((d) => {
             if (d && d.id) {
+              handleFileUploads(d.id)
+
               let path = `/${d.id}`;
               let full = window.location.origin + path;
               navigator.clipboard.writeText(full).then(() => {

mystbin/frontend/next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

mystbin/frontend/pages/_app.tsx

@@ -5,7 +5,7 @@ import Script from "next/script";
 
 function MyApp({ Component, pageProps }) {
   return(<>
-  <script async src={"https://media.ethicalads.io/media/client/ethicalads.min.js"}/>
+  <Script async src={"https://media.ethicalads.io/media/client/ethicalads.min.js"}/>
   <Component {...pageProps} />;
     </>)
 }

mystbin/frontend/styles/EditorTabs.module.css

@@ -79,30 +79,38 @@
   position: relative;
 }
 
-.addAttachmentIcon {
+.addImageButtonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem
+}
+
+.addImagesButtonNS {
   color: #e3e3e3;
-  height: 1.75rem!important;
-  width: 1.75rem!important;
 }
 
-.addAttachmentIconContainer {
-  background-color: #3C94DF;
-  display: flex;
-  flex-direction: row;
-  border-radius:  0 0 5px 5px;
-  width: fit-content;
+.addImagesButtonNS:hover {
+  filter: brightness(80%);
 }
 
-.addAttachmentsText {
-  font-size: 0.8em;
-  color: #e3e3e3;
-  padding: 0.5rem;
-  margin-right: 1rem;
-  margin-left: -0.5rem;
-  align-self: center;
+.addImagesButton {
+  color: #3C94DF;
 }
 
-.addAttachmentIconContainer:hover {
-  cursor: pointer;
-  filter: brightness(120%);
+.attachmentImageBackdrop {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9;
+}
+
+.attachmentImage {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 8;
+  max-width: 100%;
 }

mystbin/frontend/styles/Tab.module.css

@@ -4,25 +4,25 @@
   border: none;
   border-bottom: 2px solid #3C94DF;
   outline: none !important;
-  font-size: 1em;
   min-width: 4rem;
   display: inline-flex;
   min-height: 2.5rem;
   text-align: center;
   vertical-align: bottom;
+  font-size: smaller;
 }
 
 .tabs {
   background: #2b2b2b;
   color: rgba(255, 255, 255, 0.4);
   border-bottom: 2px solid transparent;
   outline: none !important;
-  font-size: 1em;
   min-width: 4rem;
   display: inline-flex;
   text-align: center;
   vertical-align: bottom;
   filter: brightness(70%);
+  font-size: smaller;
 }
 
 .tabs:hover {