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').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 {

View File

@ -65,15 +65,11 @@ function checkForRequired() {
}
checkForRequired();
function hide_image() {
x=document.getElementById('image-upload-block');
url=document.getElementById('post-url').value;
if (url.length>=1){
x.classList.add('d-none');
}
else {
x.classList.remove('d-none');
}
function remove_attachment() {
document.getElementById("file-upload").value = null;
document.getElementById('image-upload-block').classList.add('d-none');
document.getElementById('urlblock').classList.remove('d-none');
clear_files("attachment");
}
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);
}
}

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>
<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>
<img loading="lazy" id="image-preview" style="max-width:50%">
<label class="btn btn-secondary m-0" 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>
<div style="display:flex;align-items:center">
<img loading="lazy" id="image-preview" style="max-width:50%">
<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>