Integrate htmx and dropzone for file Section
This commit is contained in:
26
templates/_js_dropzone.html
Normal file
26
templates/_js_dropzone.html
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
|
||||
var dropzoneOptions = {
|
||||
dictDefaultMessage: 'Déposez vos fichiers ici!',
|
||||
paramName: "file",
|
||||
maxFilesize: 1024, // MB
|
||||
url: "/upload-dropzone",
|
||||
chunking: true,
|
||||
forceChunking: true,
|
||||
chunkSize: 1000000,
|
||||
autoProcessQueue: true,
|
||||
init: function () {
|
||||
this.on("success", function (file) {
|
||||
console.log("success > " + file.name);
|
||||
setTimeout(() => { this.removeFile(file); }, 2000);
|
||||
});
|
||||
}
|
||||
};
|
||||
var uploader = document.querySelector('#uploader');
|
||||
var myDropzone = new Dropzone(uploader, dropzoneOptions);
|
||||
console.log("Loaded");
|
||||
};
|
||||
</script>
|
||||
|
||||
4
templates/_js_htmx.html
Normal file
4
templates/_js_htmx.html
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
|
||||
<script src="{{ url_for('static', filename='vendors/htmx/htmx.min.js') }}"> </script>
|
||||
|
||||
3
templates/css/dropzone.html
Normal file
3
templates/css/dropzone.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<script src="{{ url_for('static', filename='vendors/dropzone/dropzone-min.js') }}"></script>
|
||||
<link href="{{ url_for('static', filename='vendors/dropzone/dropzone.css') }}" rel="stylesheet">
|
||||
|
||||
@@ -26,83 +26,19 @@
|
||||
<h5>
|
||||
Vous pouvez partager des liens de vos fichiers avec les autres membres de ce serveur uniquement. Si vous partagez un lien avec une personne non inscrite elle ne pourra pas y avoir accès
|
||||
</h5>
|
||||
<div hx-get="/files/private/" hx-trigger="load, every 10s">
|
||||
Chargement ...
|
||||
</div>
|
||||
|
||||
{% if listFilesPrivate %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Fichier(s) <span class="badge">{{ nb_pv }}</span></th>
|
||||
<th>Taille (en Megaoctect)</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for file in listFilesPrivate %}
|
||||
<tr>
|
||||
<td>{{ file[0] }}</td>
|
||||
<td><a href="/myfiles/{{ username }}/{{ file[1] }}">{{ file[1] }}</a></td>
|
||||
<td>{{ file[2] }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('filesupload.remove_privateFile', filename=file[1]) }}">
|
||||
<button type="button" title="Supprimer"> <span class="icons delete"></span></button>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('filesupload.move_public', filename=file[1]) }}">
|
||||
<button type="button" title="Passer ce fichier en status public"><span class="icons share"></span></button>
|
||||
</a>
|
||||
<button type="button" onclick="navigator.clipboard.writeText('{{BASE_URL}}{{ url_for('filesupload.publicfiles', username=username, filename=file[1]) }}');" title="Copier le lien du fichier">
|
||||
<span class="icons copy-link"> </span>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p> Vous n'avez aucun fichier privé </p>
|
||||
{% endif %}
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
|
||||
<h2> Fichiers publics </h2>
|
||||
<h5> Vous pouvez partager les liens de ces fichiers avec n'importe qui sur Internet ils y auront accès </h5>
|
||||
{% if listFilesPublic %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Fichier(s) <span class="badge">{{ nb_pu }}</span></th>
|
||||
<th>Taille (en Megaoctets)</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for file in listFilesPublic %}
|
||||
<tr>
|
||||
<td>{{ file[0] }}</td>
|
||||
<td><a href="/public/{{ username }}/{{ file[1] }}">{{ file[1] }}</a></td>
|
||||
<td>{{ file[2] }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('filesupload.remove_publicFile', filename=file[1]) }}">
|
||||
<button type="button" title="Supprimer"> <span class="icons delete"></span></button>
|
||||
</a>
|
||||
<a href="{{ url_for('filesupload.move_private', filename=file[1]) }}">
|
||||
<button type="button" title="Passer ce fichier en status privé"><span class="icons share"></span></button>
|
||||
</a>
|
||||
<button type="button" onclick="navigator.clipboard.writeText('{{BASE_URL}}{{ url_for('filesupload.publicfiles', username=username, filename=file[1]) }}');" title="Copier le lien du fichier">
|
||||
<span class="icons copy-link"> </span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p> Vous n'avez aucun fichier public </p>
|
||||
{% endif %}
|
||||
|
||||
<div hx-get="/files/public/" hx-trigger="load, every 10s">
|
||||
Chargement ...
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -110,4 +46,5 @@
|
||||
|
||||
{% block js %}
|
||||
{% include '_js_dropzone.html' %}
|
||||
{% include '_js_htmx.html' %}
|
||||
{% endblock %}
|
||||
|
||||
54
templates/list_files.html
Normal file
54
templates/list_files.html
Normal file
@@ -0,0 +1,54 @@
|
||||
|
||||
{% if listFiles %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Fichier(s) <span class="badge">{{ nb_files }}</span></th>
|
||||
<th>Taille (en Megaoctect)</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for file in listFiles %}
|
||||
<tr>
|
||||
<td>{{ file[0] }}</td>
|
||||
<td><a href="/myfiles/{{ username }}/{{ file[1] }}">{{ file[1] }}</a></td>
|
||||
<td>{{ file[2] }}</td>
|
||||
<td>
|
||||
{% if status == "public" %}
|
||||
<td>
|
||||
<a href="{{ url_for('filesupload.remove_publicFile', filename=file[1]) }}">
|
||||
<button type="button" title="Supprimer"> <span class="icons delete"></span></button>
|
||||
</a>
|
||||
<a href="{{ url_for('filesupload.move_private', filename=file[1]) }}">
|
||||
<button type="button" title="Passer ce fichier en status privé"><span class="icons share"></span></button>
|
||||
</a>
|
||||
<button type="button" onclick="navigator.clipboard.writeText('{{BASE_URL}}{{ url_for('filesupload.publicfiles', username=username, filename=file[1]) }}');" title="Copier le lien du fichier">
|
||||
<span class="icons copy-link"> </span>
|
||||
</button>
|
||||
</td>
|
||||
{% else %}
|
||||
|
||||
<td>
|
||||
<a href="{{ url_for('filesupload.remove_privateFile', filename=file[1]) }}">
|
||||
<button type="button" title="Supprimer"> <span class="icons delete"></span></button>
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('filesupload.move_public', filename=file[1]) }}">
|
||||
<button type="button" title="Passer ce fichier en status public"><span class="icons share"></span></button>
|
||||
</a>
|
||||
<button type="button" onclick="navigator.clipboard.writeText('{{BASE_URL}}{{ url_for('filesupload.publicfiles', username=username, filename=file[1]) }}');" title="Copier le lien du fichier">
|
||||
<span class="icons copy-link"> </span>
|
||||
</button>
|
||||
</td>
|
||||
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<h5> Aucun fichier ici </h5>
|
||||
{% endif %}
|
||||
@@ -1,86 +0,0 @@
|
||||
{% extends 'up_squelette.html' %}
|
||||
|
||||
|
||||
{% block main %}
|
||||
|
||||
|
||||
<p>Quand tu envoies des images, elles se retrouveront directement dans la <a href="/gallery/"> Gallerie</a>. </p>
|
||||
<p>Ayez bien conscience que ce site est une expérience est qu'il est indispensable d'avoir
|
||||
une sauvegarde de tous les fichiers qui vous mettrez ici. Nous ne pourrons, en aucun cas, être tenu responsable de la perte de vos
|
||||
données. Merci de votre compréhension.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<h3>Choisissez un ou plusieurs fichiers à téléverser </h3>
|
||||
|
||||
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
<input type="file" class="center" name="fic"id="fic" multiple>
|
||||
<br>
|
||||
<button type="submit" id="tada" class="btn btn btn-success"> Téléverser !</button>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2> Fichiers privés (Seul les personnes connectées et l'administrateur de l'ordinateur peuvent les voirs) </h2>
|
||||
{% if listFilesPrivate %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Fichier(s) <span class="badge">{{ nb_pv }}</span></th>
|
||||
<th>Taille (en Megaoctect)</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for file in listFilesPrivate %}
|
||||
<tr>
|
||||
<td>{{ file[0] }}</td>
|
||||
<td><a href="/myfiles/{{ username }}/{{ file[1] }}">{{ file[1] }}</a></td>
|
||||
<td>{{ file[2] }}</td>
|
||||
<td><a href="{{ url_for('filesupload.remove_privateFile', filename=file[1]) }}"><button type="button" class="btn btn-sm btn-danger">Supprimer</button></a></td>
|
||||
<td><a href="{{ url_for('filesupload.move_public', filename=file[1]) }}"><button type="button" class="btn btn-sm btn-success"> Rendre Publique </button></a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p> Vous n'avez aucun fichiers privés </p>
|
||||
{% endif %}
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<h2> Fichiers publics (Tout le monde peut les voirs) </h2>
|
||||
{% if listFilesPublic %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Fichier(s) <span class="badge">{{ nb_pu }}</span></th>
|
||||
<th>Taille (en Megaoctets)</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for file in listFilesPublic %}
|
||||
<tr>
|
||||
<td>{{ file[0] }}</td>
|
||||
<td><a href="/public/{{ username }}/{{ file[1] }}">{{ file[1] }}</a></td>
|
||||
<td>{{ file[2] }}</td>
|
||||
<td><a href="{{ url_for('filesupload.remove_publicFile', filename=file[1]) }}"><button type="button" class="btn btn-sm btn-danger">Supprimer</button></a></td>
|
||||
<td><a href="{{ url_for('filesupload.move_private', filename=file[1]) }}"><button type="button" class="btn btn-sm btn-success"> Rendre Privée </button></a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p> Vous n'avez aucun fichiers publics </p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
{% include '_head.html' %}
|
||||
{% block css %} {% endblock %}
|
||||
{% include 'css/simple_editor.html' %}
|
||||
</head>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user