add "X" button to clear attachment in /submit

files/assets/js/core.js

@@ -519,17 +519,16 @@ if (file_upload) {
 					document.getElementById('image-preview').setAttribute('src', this.result);
 					document.getElementById('image-preview').classList.remove('d-none');
 					document.getElementById('image-preview').classList.add('mr-2');
-					document.getElementById('image-preview').nextElementSibling.classList.add('mt-3');
 				};
 			}
 			else {
 				document.getElementById('image-preview').classList.add('d-none');
 				document.getElementById('image-preview').classList.remove('mr-2');
-				document.getElementById('image-preview').nextElementSibling.classList.remove('mt-3');
 			}
 
 			if (typeof checkForRequired === "function") {
 				document.getElementById('urlblock').classList.add('d-none');
+				document.getElementById('remove-attachment').classList.remove('d-none');
 				checkForRequired();
 			}
 			else {

files/assets/js/submit.js

@@ -65,15 +65,11 @@ function checkForRequired() {
 }
 checkForRequired();
 
-function hide_image() {
+function remove_attachment() {
-	x=document.getElementById('image-upload-block');
+	document.getElementById("file-upload").value = null;
-	url=document.getElementById('post-url').value;
+	document.getElementById('image-upload-block').classList.add('d-none');
-	if (url.length>=1){
+	document.getElementById('urlblock').classList.remove('d-none');
-		x.classList.add('d-none');
+	clear_files("attachment");
-	}
-	else {
-		x.classList.remove('d-none');
-	}
 }
 
 function autoSuggestTitle()	{
@@ -197,7 +193,8 @@ function submit(form) {
 					localStorage.setItem(id, value)
 				}
 
-				clear_files()
+				clear_files("attachment")
+				clear_files("textarea")
 			}
 
 			location.href = "/post/" + post_id
@@ -300,7 +297,7 @@ submit_restore_files("textarea", "file-upload-submit")
 
 //CLEAR FILES
 
-function clear_files() {
+function clear_files(kind) {
 	const open = indexedDB.open("files", 1);
 	open.onsuccess = () => {
 		const db = open.result;
@@ -311,6 +308,6 @@ function clear_files() {
 			db.close();
 		};
 
-		store.clear();
+		store.delete(kind);
 	}
 }

files/templates/submit.html

@@ -34,17 +34,19 @@
 												<button type="button" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('post-title')" class="btn btn-secondary format d-inline-block m-0" id="emoji-reply-btn-2" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></button>
 												<div id="urlblock">
 													<label for="URL" class="mt-3">URL</label>
-													<input autocomplete="off" class="form-control" id="post-url" name="url" type="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" required data-nonce="{{g.nonce}}" data-oninput="checkForRequired();hide_image();savetext();checkRepost();autoSuggestTitle()">
+													<input autocomplete="off" class="form-control" id="post-url" name="url" type="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" required data-nonce="{{g.nonce}}" data-oninput="checkForRequired();savetext();checkRepost();autoSuggestTitle()">
 													<h5 id="system" class="mt-2 form-text font-weight-bold text-danger"></h5>
 												</div>
 												<div id="image-upload-block">
 													<div><label class="mt-3">Attachment Upload</label></div>
-
+													<div style="display:flex;align-items:center">
 														<img loading="lazy" id="image-preview" style="max-width:50%">
-													<label class="btn btn-secondary m-0" for="file-upload">
+														<label class="btn btn-secondary m-0 ml-2 mr-1" for="file-upload">
 															<div>Select File</div>
 															<input autocomplete="off" id="file-upload" accept="image/*, video/*, audio/*" type="file" name="file-url" {% if g.is_tor %}disabled{% endif %} hidden>
 														</label>
+														<button id="remove-attachment" type="button" style="font-size:25px" class="text-danger font-weight-bold ml-2 d-none" data-bs-toggle="tooltip" title="Remove Attachment" data-nonce="{{g.nonce}}" data-onclick="remove_attachment()">X</button>
+													</div>
 													<small class="form-text text-muted">Optional if you have text.</small>
 													<small class="form-text text-muted">You can upload images, videos, or audio.</small>
 												</div>