68 lines
1.6 KiB
HTML
68 lines
1.6 KiB
HTML
{% 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" enctype="multipart/form-data">{% csrf_token %}
|
|
<div class="upload-drop-zone" id="drop-zone">
|
|
{% trans "Drag and drop photos here" %}
|
|
</div>
|
|
{% crispy form %}
|
|
<p class="mt-3">
|
|
{% trans "Owner will be" %} <code>{{ request.user.get_full_name }} ({{ request.user.username}})</code>.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|