{% 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" id="dropzone">
	<div class="form-group">
		<input type="file" name="file" style="display: none" onchange="$('#file-filename').text($('#file').val())">
	</div>
	<div class="form-group">
		<button type="submit" value="Upload" class="btn btn-primary btn">
			<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
			Upload
		</button>
	</div>
</form>
{% else %}
<div class="alert alert-warning">You must be <a href="{{ url_for('.login') }}">logged in</a> to upload files.</div>
{% endif %}
{% 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;
			$('.bootstrap-filestyle input').val(event.originalEvent.dataTransfer.files[0].name);
		}
	});
	$(document).on('paste', function(event) {
		var files = (event.clipboardData || event.originalEvent.clipboardData).files;
		if (files.length === 1) {
			$(':file')[0].files = files;
			$('.bootstrap-filestyle input').val(files[0].name);
		}
	});
});
</script>
{% endblock %}