Temporarily disabled multiple images

kompoth · Apr 2, 2024 · 59ccd5e · 59ccd5e
1 parent be35661
commit 59ccd5e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/static/index.html b/static/index.html
@@ -54,10 +54,10 @@ <h2>Issue creation</h2>
                     </fieldset>
 
                     <fieldset>
-                        <legend>Images <span id="image-number-tracker">(0/4)</span></legend>
+                        <legend>Images <!--span id="image-number-tracker">(0/4)</span--></legend>
                         <ul id="attached-images-list"></ul>
-                        <button type="button" id="add-image-button" onclick="document.getElementById('image-input').click();">Add image</button>
-                        <input type="file" id="image-input" multiple accept="image/png,image/jpg,image/jpeg" onchange="updateImageList();"/>
+                        <!--button type="button" id="add-image-button" onclick="document.getElementById('image-input').click();">Add image</button-->
+                        <input type="file" id="image-input" accept="image/png,image/jpg,image/jpeg" onchange="updateImageList();"/>
                     </fieldset>
 
                     <fieldset>
@@ -93,7 +93,10 @@ <h2>Syntax cheatsheet</h2>
 
 Italics with *asterisks* or _underscores_.
 
-Bold with **asterisks** or __underscores__.<!--![Image caption](image-file-name.png)-->
+Bold with **asterisks** or __underscores__.
+
+Insert images in your text like this:
+![Image caption](image-file-name.png)
 
 | A | simple          | table                    |
 | - | --------------- | ------------------------ |

diff --git a/static/script.js b/static/script.js
@@ -11,18 +11,25 @@ function trackBodyLenght () {
 }
 
 function updateImageList() {
-    const imageInput = document.getElementById("image-input");
+    var imageInput = document.getElementById("image-input");
+    /*
     const countImages = Math.min(4, imageInput.files.length);
     const countStr = "(" + countImages.toString() + "/4)";
     document.getElementById("image-number-tracker").innerHTML = countStr;
-    
+
     var imageList = document.getElementById("attached-images-list");
     imageList.innerHTML = "";
     Array.from(imageInput.files).slice(0, 4).forEach((file) => {
         var li = document.createElement("li");
         li.innerHTML = file.name;
         imageList.appendChild(li);    
     });
+    */
+    const file = imageInput.files[0];
+    if (file && file.size > 2 * 1024 * 1024) {
+        alert("Too chunky! Please attach a file that weights less than 2 MB.");
+        imageInput.value = null;
+    }
 }
 
 async function requestPDF() {
@@ -45,13 +52,11 @@ async function requestPDF() {
     }
     formData.append("issue", JSON.stringify(issue));
 
-    const imageInput = document.getElementById("image-input");
-    Array.from(imageInput.files).slice(0, 4).forEach((file) => {
-        formData.append("images", file);
-    });
+    const file = document.getElementById("image-input").files[0];
+    if (file) formData.append("images", file);
 
     try {
-        const resp = await fetch("/api/issue/", {
+        const resp = await fetch("http://127.0.0.1:8001/issue/", {
             method: "POST",
             body: formData 
         });

diff --git a/static/style.css b/static/style.css
@@ -44,5 +44,25 @@ header p {
 /* File loading button */
 form input[type=file] {
     grid-column: span 2;
-    display: none;
+    /*display: none;*/
+}
+
+input[type=file]::file-selector-button {
+    background-color: transparent;
+    color: var(--fg);
+    padding: 4px;
+    margin-right: 1rem;
+    border: 1px solid var(--fg);
+    cursor: pointer;
+}
+
+input[type=file]:disabled::file-selector-button {
+    opacity: 0.5;
+    border-style: dashed;
+    cursor: not-allowed;
+    text-decoration: line-through;
+}
+
+form input[type=file] {
+    grid-column: span 2;
 }