Add upload page

photologue_custom/templates/photologue/upload.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+{% block title %}{% trans "Upload" %}{% endblock %}
+
+{% block extracss %}
+<style>
+.upload-drop-zone {
+  height: 10em;
+  line-height: 10em;
+  border-width: 2px;
+  color: #a3a3a3;
+  border-style: dashed;
+  border-color: #a3a3a3;
+  border-radius: 0.5em;
+  text-align: center;
+  margin-bottom: 0.5em;
+}
+.upload-drop-zone.drop {
+  color: #222;
+  border-color: #222;
+  background-color: rgba(163, 163, 163, 0.274);
+}
+</style>
+{% endblock %}
+
+{% block extrajs %}
+<script>
+const dropZone = document.getElementById('drop-zone');
+const uploadInput = document.getElementById('id_file_field');
+
+dropZone.ondrop = function(e) {
+    e.preventDefault();
+    this.className = 'upload-drop-zone';
+    console.log(e.dataTransfer.files)
+    uploadInput.files = e.dataTransfer.files;
+}
+
+dropZone.ondragover = function() {
+    this.className = 'upload-drop-zone drop';
+    return false;
+}
+
+dropZone.ondragleave = function() {
+    this.className = 'upload-drop-zone';
+    return false;
+}
+</script>
+{% endblock %}
+
+{% block content %}
+<h1>{% trans "Upload" %}</h1>
+<div class="card">
+    <div class="card-body">
+        <form method="post">{% csrf_token %}
+            <div class="upload-drop-zone" id="drop-zone">
+                {% trans "Drag and drop photos here" %}
+            </div>
+            {{ form|crispy }}
+            <p class="mt-3">
+                {% trans "Owner will be" %} <code>{{ request.user.get_full_name }} ({{ request.user.username}})</code>.
+            </p>
+            <button type="submit" class="btn btn-success">{% trans "Upload" %}</button>
+        </form>
+    </div>
+</div>
+{% endblock %}