From caa63fdc71a36022be4d86e3e33b95edd4e07ea2 Mon Sep 17 00:00:00 2001 From: Stefan Schallerl Date: Thu, 6 Feb 2025 23:35:51 +0100 Subject: [PATCH] Adds upload progress bar. --- .../kotlin/net/h34t/filemure/FilemureApp.kt | 2 +- .../filemure/controller/DocumentController.kt | 6 ++- .../filemure/controller/LimboController.kt | 9 ++-- .../tpl/net.h34t.filemure.tpl/Frame.tpl.html | 3 ++ .../tpl/net.h34t.filemure.tpl/Limbo.tpl.html | 8 ++-- public/filemure.css | 2 - public/filemure.js | 48 ++++++++++++++----- 7 files changed, 53 insertions(+), 25 deletions(-) diff --git a/app/src/main/kotlin/net/h34t/filemure/FilemureApp.kt b/app/src/main/kotlin/net/h34t/filemure/FilemureApp.kt index eca07f8..85dc864 100644 --- a/app/src/main/kotlin/net/h34t/filemure/FilemureApp.kt +++ b/app/src/main/kotlin/net/h34t/filemure/FilemureApp.kt @@ -48,7 +48,7 @@ class FilemureApp(repository: SqliteRepository) { server.post("/document/{extId}/delete", documentController::deleteDocumentAction, Role.USER) server.get("/file/{extId}/download", documentController::downloadFile, Role.USER) - server.get("/file/{extId}/delete", documentController::deleteFileAction, Role.USER) + server.post("/file/{extId}/delete", documentController::deleteFileAction, Role.USER) server.get("/search", searchController::search, Role.USER) diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt index 0500f35..cc31206 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt @@ -150,10 +150,14 @@ class DocumentController(val modifiers: TemplateModifiers, val repository: Sqlit fun deleteFileAction(ctx: Context) { val session = ctx.requireSession() val extId = ExtId(ctx.pathParam("extId")) + val ret = ctx.queryParam("return") repository.setFileState(session.id, extId = extId, state = State.ARCHIVED) - ctx.redirectPRG("/") + when (ret) { + "limbo" -> ctx.redirectPRG("/limbo") + else -> ctx.redirectPRG("/") + } } fun editDocumentForm(ctx: Context) { diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt index b835886..7704bd4 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt @@ -1,10 +1,8 @@ package net.h34t.filemure.controller import io.javalin.http.Context -import net.h34t.filemure.TemplateModifiers +import net.h34t.filemure.* import net.h34t.filemure.repository.SqliteRepository -import net.h34t.filemure.requireSession -import net.h34t.filemure.tempolin import net.h34t.filemure.tpl.Frame import net.h34t.filemure.tpl.Limbo import java.time.format.DateTimeFormatter @@ -13,7 +11,6 @@ import java.time.format.FormatStyle class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRepository) { private val dtf = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.MEDIUM, FormatStyle.SHORT) - private val isoDtf = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss") fun formLimbo(ctx: Context) { val session = ctx.requireSession() @@ -29,8 +26,8 @@ class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRe extId = f.extId.value, file = f.filename, type = f.contentType ?: "", - size = f.fileSize.toString(), - uploaded = f.created.format(dtf) + size = formatHumanReadableSize(f.fileSize), + uploaded = f.created.formatHuman() ) }.asSequence() }) diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Frame.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Frame.tpl.html index 1b3e3a9..7d10c94 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Frame.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Frame.tpl.html @@ -10,6 +10,9 @@ {if $isTarget}
+ + + {/if} {template $content} diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html index 8ce6df4..dea1f5f 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html @@ -20,11 +20,11 @@ {*$type} {*$size} {*$uploaded} - - view - -
+ + + +
{/for} diff --git a/public/filemure.css b/public/filemure.css index afb9991..b0c8733 100644 --- a/public/filemure.css +++ b/public/filemure.css @@ -4,7 +4,6 @@ right: 0px; top: 0px; bottom: 0px; - /* visibility: visible; */ display: none; border: 0px dotted red; margin: 4px; @@ -13,7 +12,6 @@ .dropzone.dragactive { background-color: #33FF0000; border: 3px dotted blue; - /* visibility: visible; */ display: block; } diff --git a/public/filemure.js b/public/filemure.js index 0843a2f..45a1cde 100644 --- a/public/filemure.js +++ b/public/filemure.js @@ -2,6 +2,9 @@ document.addEventListener("DOMContentLoaded", function() { console.log("filemure ready") const dropzone = document.querySelector('html'); + let progressDialog = document.querySelector('#upload_progress_dialog') + let progressBar = document.querySelector('#upload_progress') + // window.addEventListener // Prevent default behavior for drag-over and drop @@ -28,19 +31,42 @@ document.addEventListener("DOMContentLoaded", function() { // Process the files for (const file of files) { - console.log('File name:', file.name); - console.log('File size:', file.size, 'bytes'); - console.log('File type:', file.type); + progressDialog.showModal(); + console.log('File name:', file.name); + console.log('File size:', file.size, 'bytes'); + console.log('File type:', file.type); - const formData = new FormData(); - formData.append('file', file); + const formData = new FormData(); + formData.append('file', file); - fetch('/upload', { - method: 'POST', - body: formData, - }).then(response => response.json()) - .then(data => console.log('Upload successful:', data)) - .catch(error => console.error('Upload failed:', error)); + const xhr = new XMLHttpRequest(); + xhr.upload.addEventListener("progress", (event) => { + if (event.lengthComputable) { + console.log("upload progress:", event.loaded / event.total); + progressBar.value = 100.0 * event.loaded / event.total; + } + }); + xhr.addEventListener("progress", (event) => { + if (event.lengthComputable) { + console.log("download progress:", event.loaded / event.total); + progressBar.value = event.loaded / event.total; + } + }); + xhr.addEventListener("loadend", () => { + console.log(xhr.readyState, xhr.status) + progressDialog.close(); + }); + + xhr.open('POST', '/upload', false); + xhr.send(formData); + +// fetch('/upload', { +// method: 'POST', +// body: formData, +// }) +// .then(response => response.json()) +// .then(data => console.log('Upload successful:', data)) +// .catch(error => console.error('Upload failed:', error)); } } });