schrottkatze/karton
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 2 Packages Wiki Activity

Add drag-and-drop to new file attachment button

Browse source
This commit is contained in:
Daniel Szabo 2022-11-07 00:30:17 +02:00
parent 5e2513eb1f
commit b9a6717ba0
1 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
templates/index.html
View file

@ -1,6 +1,6 @@
{% include "header.html" %} {% include "header.html" %}
<form action="upload" method="POST" enctype="multipart/form-data"> <form id="pasta-form" action="upload" method="POST" enctype="multipart/form-data">
<br> <br>
<div id="settings"> <div id="settings">
<div> <div>
@ -158,18 +158,14 @@
</div> </div>
{%- endif %} {%- endif %}
</div> </div>
</div> </div>
<label>Content</label> <label>Content</label>
<textarea style="width: 100%; min-height: 100px; margin-bottom: 2em" name="content" autofocus></textarea> <textarea style="width: 100%; min-height: 100px; margin-bottom: 2em" name="content" autofocus></textarea>
<div style="overflow:auto;"> <div style="overflow:auto;">
{% if !args.no_file_upload %} {% if !args.no_file_upload %}
<div style="float: left"> <div style="float: left">
<label for="file" id="attach-file-button-label"><a role="button" id="attach-file-button">Attach <label for="file" id="attach-file-button-label"><a role="button" id="attach-file-button">Select or drop
File</a></label> file attachment</a></label>
<br> <br>
<input type="file" id="file" name="file" /> <input type="file" id="file" name="file" />
</div> </div>
@ -190,10 +186,29 @@
<script> <script>
const hiddenFileButton = document.getElementById('file'); const hiddenFileButton = document.getElementById('file');
const attachFileButton = document.getElementById('attach-file-button'); const attachFileButton = document.getElementById('attach-file-button');
const dropContainer = document.getElementById('pasta-form');
hiddenFileButton.addEventListener('change', function () { hiddenFileButton.addEventListener('change', function () {
attachFileButton.textContent = "Attached: " + this.files[0].name; attachFileButton.textContent = "Attached: " + this.files[0].name;
}) });
dropContainer.ondragover = dropContainer.ondragenter = function (evt) {
evt.preventDefault();
if (hiddenFileButton.files.length == 0) {
attachFileButton.textContent = "Drop your file here";
} else {
attachFileButton.textContent = "Drop your file here to replace " + hiddenFileButton.files[0].name;
}
};
dropContainer.ondrop = function (evt) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(evt.dataTransfer.files[0]);
hiddenFileButton.files = dataTransfer.files;
attachFileButton.textContent = "Attached: " + hiddenFileButton.files[0].name;
evt.preventDefault();
};
</script> </script>
<style> <style>