Merge pull request #104 from sharkykh/upload-d&d

Drag&Drog torrent file in upload, fixes #99

nyaa/static/css/main.css

@@ -173,6 +173,34 @@ table.torrent-list thead th.sorting_desc:after {
 	}
 }
 
+/* Upload page drop zone */
+#upload-drop-zone
+{
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 9999999999;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	transition: visibility 175ms, opacity 175ms;
+	display: table;
+	text-shadow: 1px 1px 2px #000;
+	color: #fff;
+	background: rgba(0, 0, 0, 0.45);
+	font: bold 42px Tahoma, sans-serif;
+}
+
+#upload-drop-zone span
+{
+	display: table-cell;
+	text-align: center;
+	vertical-align: middle;
+	transition: font-size 175ms;
+}
+
 /* elasticsearch term highlight */
 .hlt1 {
 	font-style: normal;
@@ -184,5 +212,5 @@ table.torrent-list thead th.sorting_desc:after {
 }
 
 ul.nav-tabs#profileTabs {
-    margin-bottom: 15px;
+	margin-bottom: 15px;
 }

nyaa/static/js/main.js

@@ -18,10 +18,23 @@ $(document).on('change', ':file', function() {
 
 // We can watch for our custom `fileselect` event like this
 $(document).ready(function() {
-	$(':file').on('fileselect', function(event, numFiles, label) {
+	var dropZone = $('#upload-drop-zone'),
+		fileWarning = $('<div/>').html('Invalid file selected. Please select a torrent file.')
+			.css({  id: 'file-warning', class: 'alert alert-warning text-center',
+					role: 'alert', width: $('.form-group:first').width() + 'px' })
+			.hide().insertAfter(dropZone);
 
+	$(':file').on('fileselect', function(event, numFiles, label) {
 		var input = $(this).parent().prev().find(':text'),
 			log = numFiles > 1 ? numFiles + ' files selected' : label;
+		
+		if (label.endsWith('.torrent')) {
+			fileWarning.fadeOut('fast');
+		} else {
+			fileWarning.fadeIn('fast');
+			input.val('');
+			return false;
+		}
 
 		if (input.length) {
 			input.val(log);
@@ -29,6 +42,27 @@ $(document).ready(function() {
 			if (log) alert(log);
 		}
 	});
+
+	$('body').on('dragenter', function(event) {
+		event.preventDefault();
+		dropZone.css({ 'visibility': 'visible', 'opacity': 1 });
+	});
+
+	dropZone.on('dragleave', function(event) {
+		event.preventDefault();
+		$(this).css({ 'visibility': 'hidden', 'opacity': 0 });
+	});
+
+	dropZone.on('dragover', function(event) {
+		event.preventDefault();
+	});
+
+	dropZone.on('drop dragdrop', function(event) {
+		event.preventDefault();
+		var files = event.originalEvent.dataTransfer.files;
+		$('#torrent_file')[0].files = files;
+		$(this).css({ 'visibility': 'hidden', 'opacity': 0 });
+	});
 });
 
 function _format_time_difference(seconds) {

nyaa/templates/upload.html

@@ -12,6 +12,7 @@
 {% endif %}
 
 
+<div id="upload-drop-zone"><span>Drop here!</span></div>
 <form method="POST" enctype="multipart/form-data">
 	{% if config.ENFORCE_MAIN_ANNOUNCE_URL %}<p><strong>Important:</strong> Please include <kbd>{{config.MAIN_ANNOUNCE_URL}}</kbd> in your trackers</p>{% endif %}
 	<div class="row">