Add image download progress bar and fix output name of pictures

This commit is contained in:
Antoine Bartuccio 2024-07-28 23:53:18 +02:00
parent 39151b61e7
commit 3304f32ef0

View File

@ -21,6 +21,7 @@
<main> <main>
{% if can_edit(profile, user) %} {% if can_edit(profile, user) %}
<button disabled id="download" onclick="download('{{ url('api:pictures') }}?users_identified={{ object.id }}')">{% trans %}Download all my pictures{% endtrans %}</button> <button disabled id="download" onclick="download('{{ url('api:pictures') }}?users_identified={{ object.id }}')">{% trans %}Download all my pictures{% endtrans %}</button>
<progress id="download_progress" max="100" hidden></progress>
{% endif %} {% endif %}
{% for album, pictures in albums|items %} {% for album, pictures in albums|items %}
<h4>{{ album }}</h4> <h4>{{ album }}</h4>
@ -59,14 +60,21 @@
async function download(url) { async function download(url) {
let zip = new JSZip(); let zip = new JSZip();
let size = 0;
let pictures = await (await fetch(url)).json(); let pictures = await (await fetch(url)).json();
let progressBar = document.getElementById("download_progress");
let picturesDownloaded = 0;
let button = document.getElementById("download");
button.disabled = true;
progressBar.value = picturesDownloaded;
progressBar.hidden = false;
pictures.forEach(async (picture) => { pictures.forEach(async (picture) => {
size += picture.size;
zip.file( zip.file(
"IMG_" + picture.date + picture.name.slice(picture.name.lastIndexOf(".")), "IMG_" + picture.date.replaceAll(":", "_").replaceAll("-", "_") + picture.name.slice(picture.name.lastIndexOf(".")),
new Promise(function (resolve, reject) { new Promise(function (resolve, reject) {
JSZipUtils.getBinaryContent(picture.full_size_url, (err, data) => { JSZipUtils.getBinaryContent(picture.full_size_url, (err, data) => {
progressBar.value = picturesDownloaded++ * 100 / (pictures.length - 1);
if (err) { if (err) {
reject(err); reject(err);
return; return;
@ -96,6 +104,9 @@
.on("error", (err) => console.error(err)) .on("error", (err) => console.error(err))
.on("end", () => writeStream.close()) .on("end", () => writeStream.close())
.resume(); .resume();
button.disabled = false;
progressBar.hidden = true;
} }
</script> </script>
</main> </main>