add "X" button to clear attachment in /submit

master
Aevann 2023-08-11 19:19:06 +03:00
parent cee7677170
commit c9144e8bf6
3 changed files with 19 additions and 21 deletions

View File

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

View File

@ -65,15 +65,11 @@ function checkForRequired() {
} }
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() { function autoSuggestTitle() {
@ -197,7 +193,8 @@ function submit(form) {
localStorage.setItem(id, value) localStorage.setItem(id, value)
} }
clear_files() clear_files("attachment")
clear_files("textarea")
} }
location.href = "/post/" + post_id location.href = "/post/" + post_id
@ -300,7 +297,7 @@ submit_restore_files("textarea", "file-upload-submit")
//CLEAR FILES //CLEAR FILES
function clear_files() { function clear_files(kind) {
const open = indexedDB.open("files", 1); const open = indexedDB.open("files", 1);
open.onsuccess = () => { open.onsuccess = () => {
const db = open.result; const db = open.result;
@ -311,6 +308,6 @@ function clear_files() {
db.close(); db.close();
}; };
store.clear(); store.delete(kind);
} }
} }

View File

@ -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> <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"> <div id="urlblock">
<label for="URL" class="mt-3">URL</label> <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> <h5 id="system" class="mt-2 form-text font-weight-bold text-danger"></h5>
</div> </div>
<div id="image-upload-block"> <div id="image-upload-block">
<div><label class="mt-3">Attachment Upload</label></div> <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%"> <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> <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> <input autocomplete="off" id="file-upload" accept="image/*, video/*, audio/*" type="file" name="file-url" {% if g.is_tor %}disabled{% endif %} hidden>
</label> </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">Optional if you have text.</small>
<small class="form-text text-muted">You can upload images, videos, or audio.</small> <small class="form-text text-muted">You can upload images, videos, or audio.</small>
</div> </div>