Integrate htmx and dropzone for file Section

This commit is contained in:
2026-01-13 01:53:13 +01:00
parent 0e79fdcb36
commit 5abbf367ab
15 changed files with 248 additions and 225 deletions

View 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
View File

@@ -0,0 +1,4 @@
<script src="{{ url_for('static', filename='vendors/htmx/htmx.min.js') }}"> </script>

View 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">

View File

@@ -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
View 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 %}

View File

@@ -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 %}

View File

@@ -2,6 +2,7 @@
<html lang="fr">
<head>
{% include '_head.html' %}
{% block css %} {% endblock %}
{% include 'css/simple_editor.html' %}
</head>