summaryrefslogtreecommitdiff
path: root/fbin/templates/upload.html
diff options
context:
space:
mode:
authorJon Bergli Heier <snakebite@jvnv.net>2017-08-16 21:52:09 +0200
committerJon Bergli Heier <snakebite@jvnv.net>2017-08-16 21:52:09 +0200
commit24b1a9886be5632730b8f020c358a5d8915f1dbb (patch)
tree5dee52566737ae8daca970198a26af14986da9e6 /fbin/templates/upload.html
parentd9a5bc806e53a602f9afd7febd24c1acf3b93d28 (diff)
Added drag and drop support to the upload form.
Diffstat (limited to 'fbin/templates/upload.html')
-rw-r--r--fbin/templates/upload.html38
1 files changed, 37 insertions, 1 deletions
diff --git a/fbin/templates/upload.html b/fbin/templates/upload.html
index 643e09d..9fe1571 100644
--- a/fbin/templates/upload.html
+++ b/fbin/templates/upload.html
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
{% if current_user.is_authenticated or config.ALLOW_ANONYMOUS_UPLOADS %}
-<form method="post" enctype="multipart/form-data" class="form-horizontal">
+<form method="post" enctype="multipart/form-data" class="form-horizontal" id="dropzone">
<div class="form-group">
<input type="file" name="file" style="display: none" onchange="$('#file-filename').text($('#file').val())">
</div>
@@ -18,8 +18,44 @@
{% endblock %}
{% block scripts %}
<script>
+var drop_target = null;
$(document).ready(function() {
$(':file').filestyle('placeholder', 'No file');
+ /* XXX: For some reason files.length is 0 on all events except drop, so check items.length instead. */
+ $('#dropzone').on('dragenter', function(event) {
+ if (event.originalEvent.dataTransfer.items.length != 1) {
+ event.originalEvent.dataTransfer.dropEffect = 'none';
+ $('#dropzone').addClass('drop-invalid');
+ return;
+ }
+ drop_target = event.target;
+ event.stopPropagation();
+ event.preventDefault();
+ $('#dropzone').addClass('drop-active').removeClass('drop-invalid');
+ });
+ $('#dropzone').on('dragleave', function(event) {
+ /* We receive leave events after enter event for the new element, so keep track of the current element before removing drop classes. */
+ if (event.target == drop_target) {
+ $('#dropzone').removeClass('drop-active drop-invalid');
+ }
+ });
+ $('#dropzone').on('dragover', function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ if (event.originalEvent.dataTransfer.items.length != 1) {
+ event.originalEvent.dataTransfer.dropEffect = 'none';
+ } else {
+ event.originalEvent.dataTransfer.dropEffect = 'copy';
+ }
+ });
+ $('#dropzone').on('drop', function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ $('#dropzone').removeClass('drop-active drop-invalid');
+ if (event.originalEvent.dataTransfer.files.length == 1) {
+ $(':file')[0].files = event.originalEvent.dataTransfer.files;
+ }
+ });
});
</script>
{% endblock %}