diff options
author | Jon Bergli Heier <snakebite@jvnv.net> | 2017-08-16 21:52:09 +0200 |
---|---|---|
committer | Jon Bergli Heier <snakebite@jvnv.net> | 2017-08-16 21:52:09 +0200 |
commit | 24b1a9886be5632730b8f020c358a5d8915f1dbb (patch) | |
tree | 5dee52566737ae8daca970198a26af14986da9e6 | |
parent | d9a5bc806e53a602f9afd7febd24c1acf3b93d28 (diff) |
Added drag and drop support to the upload form.
-rw-r--r-- | fbin/static/css/style.css | 14 | ||||
-rw-r--r-- | fbin/templates/upload.html | 38 |
2 files changed, 51 insertions, 1 deletions
diff --git a/fbin/static/css/style.css b/fbin/static/css/style.css index 8989c22..2f3ed86 100644 --- a/fbin/static/css/style.css +++ b/fbin/static/css/style.css @@ -16,3 +16,17 @@ transform: rotate(359deg); } } +#dropzone { + border-radius: 5px; + border: 2px dashed #f0f0f0; +} +#dropzone.drop-active { + border: 2px dashed #808080; +} +#dropzone.drop-invalid { + border: 2px dashed #e00000; +} +/* Fix form group spilling outside the dropzone. */ +#dropzone .form-group { + margin: 5px; +} 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 %} |