Feature/drag and drop and bugfix/handle-bad-paste-content (#39)

* Disable preloading until investigated further.

* Update some docs

* Add "/pastes" for API compat.

* Possible theme flash fix.

* Invalidate theme JS cache.

* Possible speedups; Removed a fetch call and unnecessary CSS/JS loading.

* Sadly this needs to be defered.

* Remove all newlines from filenames

* Add line numbers to single line pastes.

* Allow HTML comments.

* Added automatic files; removed add file button

* Some CSS adjustments

* Add favicon

* Some CSS changes and fixes to new file behaviour.

* Revert light theme paste background to white

* Changes to README

* More README changes.

* Paste Header style changes

* Add some annotations style changes

* Various CSS adjustments; better spacing, light theme improvements.

* Return eror if paste has invalid characters.

* Add drag and drop files.

---------

Co-authored-by: LostLuma <[email protected]>

Author: EvieePy

views/api.py

@@ -22,6 +22,7 @@
 import json
 from typing import TYPE_CHECKING, Any
 
+import asyncpg
 import starlette_plus
 
 from core import CONFIG
@@ -277,7 +278,11 @@ async def paste_post(self, request: starlette_plus.Request) -> starlette_plus.Re
         data["expires"] = expiry
         data["password"] = data.get("password")
 
-        paste = await self.app.database.create_paste(data=data)
+        try:
+            paste = await self.app.database.create_paste(data=data)
+        except asyncpg.CharacterNotInRepertoireError:
+            message: str = "File(s)/Filename(s) contain invalid characters or byte sequences."
+            return starlette_plus.JSONResponse({"error": message}, status_code=400)
 
         to_return: dict[str, Any] = paste.serialize(exclude=["password", "password_ok"])
         to_return.pop("files", None)

views/htmx.py

@@ -23,6 +23,7 @@
 from typing import TYPE_CHECKING, Any, cast
 from urllib.parse import unquote, urlsplit
 
+import asyncpg
 import bleach
 import humanize
 import starlette_plus
@@ -257,8 +258,14 @@ async def htmx_save(self, request: starlette_plus.Request) -> starlette_plus.Res
 
             inner: dict[str, str | None] = {}
 
-            inner["filename"] = names[n] or None
-            inner["content"] = contents[n]
+            try:
+                inner["filename"] = names[n].encode("UTF-8").decode("UTF-8") or None
+                inner["content"] = contents[n].encode("UTF-8").decode("UTF-8")
+            except Exception:
+                return starlette_plus.HTMLResponse(
+                    """<span id="errorResponse">400: File/Filename contains invalid characters.</span>""",
+                    headers=error_headers,
+                )
             data["files"].append(inner)
 
         if not data["files"]:
@@ -277,7 +284,14 @@ async def htmx_save(self, request: starlette_plus.Request) -> starlette_plus.Res
         data["expires"] = None  # TODO: Add this to Frontend...
         data["password"] = password or None
 
-        paste = await self.app.database.create_paste(data=data)
+        try:
+            paste = await self.app.database.create_paste(data=data)
+        except asyncpg.CharacterNotInRepertoireError:
+            return starlette_plus.HTMLResponse(
+                """<span id="errorResponse">400: File/Filename contains invalid characters.</span>""",
+                headers=error_headers,
+            )
+
         to_return: dict[str, Any] = paste.serialize(exclude=["password", "password_ok"])
         identifier: str = to_return["id"]
 

web/index.html

@@ -18,6 +18,7 @@
   <script src="/static/scripts/initialTheme.js?v=1"></script>
   <script src="/static/scripts/themes.js?v=1" defer></script>
   <script src="/static/scripts/files.js?v=3" defer></script>
+  <script src="/static/scripts/dragDrop.js?v=1"></script>
 
   <!-- STYLESHEETS -->
   <!-- <link rel="preload" href="static/styles/global.css" as="style" /> -->
@@ -54,7 +55,7 @@
   <form id="content" class="content" hx-swap-oob="true" hx-swap="outerHTML"
     hx-include="[name='fileName'] [name='fileContent'] [name='pastePassword']">
     <div id="pastecontainer" class="pasteContainer">
-      <div class="pasteArea" id="__file0" data-position="0">
+      <div class="pasteArea" id="__file0" data-position="0" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
         <div class="pasteHeader">
           <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"
             spellcheck="false"></textarea>
@@ -64,7 +65,7 @@
 Filling in all current files will create a new one (Up to 5)" maxlength="300000" onkeyup="addFile(0)"></textarea>
       </div>
 
-      <div class="pasteArea smallArea" id="__file1" data-position="1">
+      <div class="pasteArea smallArea" id="__file1" data-position="1" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
         <div class="pasteHeader">
           <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"
             spellcheck="false"></textarea>

web/static/scripts/dragDrop.js

@@ -0,0 +1,79 @@
+let dragCounter = 0;
+
+function fileDragStart(event, target) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    target.classList.add("dragging");
+    let pasteAreas = pasteContainer.getElementsByClassName("pasteArea");
+
+    for (let area of pasteAreas) {
+        if (area === target) {
+            continue;
+        }
+        area.classList.remove("dragging");
+    }
+
+    if (target.classList.contains("smallArea")) {
+        target.classList.remove("smallArea");
+    }
+
+    dragCounter++;
+}
+
+function fileDragOver(event, target) {
+    event.preventDefault();
+
+    if (event.dataTransfer.items === 0) { return }
+
+    let type = event.dataTransfer.items[0].type;
+    if (!type) { return }
+
+    if (!type.startsWith("text/") && !type.startsWith("application/")) {
+        target.classList.add("prevented");
+        event.dataTransfer.dropEffect = "none";
+    }
+}
+
+function fileDragEnd(event, target) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    dragCounter--;
+    if (dragCounter !== 0) { return }
+
+    target.classList.remove("dragging");
+    target.classList.remove("prevented");
+
+}
+
+async function fileDrop(event, target) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    dragCounter = 0;
+
+    target.classList.remove("prevented");
+    target.classList.remove("dragging");
+
+    const file = event.dataTransfer.files[0];
+    const textArea = target.querySelector(".fileContent");
+    const fileName = target.querySelector(".pasteHeader > .filenameArea");
+
+    // Allow double the server limit incase of editing...
+    if (file.size > 600000) {
+        return;
+    }
+
+    if (!file.type) { }
+    else if (!file.type.startsWith("text/") && !file.type.startsWith("application/")) {
+        return;
+    }
+
+    let name = file.name;
+    let content = await file.text();
+    fileName.value = name;
+    textArea.value = content;
+
+    addFile();
+}

web/static/scripts/files.js

@@ -29,7 +29,8 @@ function addFile(number) {
     count += 1;
 
     const pasteHTML = `
-    <div class="pasteArea smallArea" id="__file${count}" data-position="${count}">
+    <div class="pasteArea smallArea" id="__file${count}" data-position="${count}" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
+
         <div class="pasteHeader">
             <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"></textarea>
             <span class="deleteFile" onclick="deleteFile('__file${count}')">Delete File</span>
@@ -84,7 +85,8 @@ function deleteFile(identifier) {
     if (!canContinue) { return }
 
     const pasteHTML = `
-    <div class="pasteArea smallArea" id="__file${count}" data-position="${count}">
+    <div class="pasteArea smallArea" id="__file${count}" data-position="${count}" ondrop="fileDrop(event, this)" ondragover="fileDragOver(event, this)" ondragenter="fileDragStart(event, this)" ondragleave="fileDragEnd(event, this)">
+
         <div class="pasteHeader">
             <textarea name="fileName" class="filenameArea" rows="1" placeholder="Optional Filename..." maxlength="25"></textarea>
             <span class="deleteFile" onclick="deleteFile('__file${count}')">Delete File</span>
@@ -93,5 +95,4 @@ function deleteFile(identifier) {
     </div>`;
 
     pasteContainer.insertAdjacentHTML("beforeend", pasteHTML);
-    
 }

web/static/styles/global.css

@@ -16,6 +16,34 @@
   --button--brightness: brightness(0.95);
   --button--brightness-hover: brightness(0.85);
   --button--brightness-active: brightness(0.95);
+
+  .deleteFile {
+    background-color: var(--color-background);
+    filter: brightness(0.99);
+  }
+
+  .deleteFile:hover {
+    cursor: pointer;
+    filter: brightness(0.97);
+  }
+
+  .deleteFile:active {
+    filter: brightness(0.99);
+  }
+
+  .savePaste {
+    background-color: var(--color-background);
+    filter: brightness(0.99);
+  }
+
+  .savePaste:hover {
+    cursor: pointer;
+    filter: brightness(0.97);
+  }
+
+  .savePaste:active {
+    filter: brightness(0.99);
+  }
 }
 
 [data-theme="dark"] {
@@ -138,32 +166,60 @@ a {
   height: 100%;
   background-color: var(--color-background--pastes);
   border-radius: 0.25rem;
+  border: 1px solid transparent;
+
+}
+
+.dragging {
+  opacity: 0.5;
+  border: 1px dashed var(--color-accent);
+  position: relative;
+  cursor: copy;
+  background-color: var(--color-background--pastes);
+}
+
+.dragging::after {
+  pointer-events: none;
+  content: "Drop File to Paste...";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.prevented {
+  border: 1px dashed var(--color-error);
+  cursor: no-drop;
+}
+
+.prevented::after {
+  content: "File is not allowed...";
+  color: var(--color-error);
+  font-weight: 700;
+  font-size: larger;
 }
 
 .pasteHeader {
   background-color: var(--color-second-paste);
   border-radius: 0.25rem 0.2rem 0 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  width: 100%;
 }
 
 .pasteContainer {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
   flex-grow: 1;
   width: 100%;
   max-width: 100%;
   border-radius: 0.25rem;
 }
 
-.pasteHeader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  width: 100%;
-}
-
 input[type="password"] {
   background-color: var(--color-background--pastes) !important;
   color: var(--color-foreground) !important;
@@ -212,13 +268,12 @@ input[type="password"] {
 
 .smallArea {
   flex-grow: 0;
-  height: 7rem;
-  margin: 0 0 6rem 0;
+  height: 9rem;
 }
 
 .smallArea>textarea {
-  min-height: 7rem;
-  height: 7rem;
+  min-height: 4rem;
+  height: 4rem;
 }
 
 textarea::-webkit-resizer {
@@ -252,7 +307,7 @@ textarea {
 
 .deleteFile {
   display: flex;
-  padding: 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   background-color: var(--color-background--header);
   filter: brightness(0.8);
@@ -318,7 +373,7 @@ textarea {
 
 .savePaste {
   display: flex;
-  padding: 1rem 4rem;
+  padding: 0.75rem 4rem;
   border-radius: 0.25rem;
   background-color: var(--color-background--button);
   filter: var(--button--brightness);
@@ -491,7 +546,12 @@ textarea {
   }
 
   .savePaste {
-    padding: 1rem;
+    padding: 0.75rem;
+    font-size: 0.8em;
+  }
+
+  .deleteFile {
+    padding: 0.5rem 1rem;
     font-size: 0.8em;
   }
 
@@ -524,6 +584,7 @@ textarea {
   .header {
     padding: 1rem 0.5rem;
   }
+
   .pasteArea>textarea {
     font-size: 0.8em;
   }