Added drag and drop support to the upload form.

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 %}