sinfonie/photo26
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Move upload JS to upload.js

Browse source
This commit is contained in:
Alexandre Iooss 2022-03-11 18:44:25 +01:00
parent 1462ef7240
commit 443ba11ea2
2 changed files with 45 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

42
photologue/static/upload.js Normal file
View file

@ -0,0 +1,42 @@
// This file is part of photo21
// Copyright (C) 2022 Amicale des élèves de l'ENS Paris-Saclay
// SPDX-License-Identifier: GPL-3.0-or-later
// When user drags files, register them in the file field
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;
}
// When user selects an existing gallery, disable new gallery fields
const gallerySelect = document.getElementById('id_gallery')
gallerySelectUpdate = () => {
const useGallery = (gallerySelect.value !== "");
document.getElementById('id_new_gallery_title').disabled = useGallery;
document.getElementById('id_new_gallery_date_start').disabled = useGallery;
document.getElementById('id_new_gallery_date_end').disabled = useGallery;
document.getElementById('id_new_gallery_tags').disabled = useGallery;
}
gallerySelect.addEventListener('change', gallerySelectUpdate);
gallerySelectUpdate();
// On submit, show a message to make user wait
document.getElementById('upload_form').addEventListener('submit', (e) => {
document.getElementById('submit-id-submit').disabled = true;
document.getElementById('submit-id-submit').value = "Please be patient";
})

45
photologue/templates/photologue/upload.html
View file

@ -4,50 +4,11 @@ This file is part of photo21
Copyright (C) 2022 Amicale des élèves de l'ENS Paris-Saclay Copyright (C) 2022 Amicale des élèves de l'ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %} {% endcomment %}
{% load i18n crispy_forms_tags %} {% load i18n static crispy_forms_tags %}
{% block title %}{% trans "Upload" %}{% endblock %} {% block title %}{% trans "Upload" %}{% endblock %}
{% block extrajs %} {% block extrajs %}
<script> <script src="{% static 'upload.js' %}"></script>
// When user drags files, register them in the file field
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;
}
// When user selects an existing gallery, disable new gallery fields
const gallerySelect = document.getElementById('id_gallery')
gallerySelectUpdate = () => {
const useGallery = (gallerySelect.value !== "");
document.getElementById('id_new_gallery_title').disabled = useGallery;
document.getElementById('id_new_gallery_date_start').disabled = useGallery;
document.getElementById('id_new_gallery_date_end').disabled = useGallery;
document.getElementById('id_new_gallery_tags').disabled = useGallery;
}
gallerySelect.addEventListener('change', gallerySelectUpdate);
gallerySelectUpdate();
// On submit, show a message to make user wait
document.getElementById('upload_form').addEventListener('submit', (e) => {
document.getElementById('submit-id-submit').disabled = true;
document.getElementById('submit-id-submit').value = "Please be patient";
})
</script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -55,7 +16,7 @@ document.getElementById('upload_form').addEventListener('submit', (e) => {
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<form method="post" enctype="multipart/form-data" id="upload_form">{% csrf_token %} <form method="post" enctype="multipart/form-data" id="upload_form">{% csrf_token %}
<div class="upload-drop-zone" id="drop-zone"> <div class="upload-drop-zone" id="drop_zone">
{% trans "Drag and drop photos here" %} {% trans "Drag and drop photos here" %}
</div> </div>
{% crispy form %} {% crispy form %}