h34tnet/filemure
h34tnet/filemure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds upload progress bar.

Browse source
This commit is contained in:
Stefan Schallerl 2025-02-06 23:35:51 +01:00
parent 3045f46525
commit caa63fdc71
7 changed files with 53 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/kotlin/net/h34t/filemure/FilemureApp.kt
View file

@ -48,7 +48,7 @@ class FilemureApp(repository: SqliteRepository) {
server.post("/document/{extId}/delete", documentController::deleteDocumentAction, Role.USER) server.post("/document/{extId}/delete", documentController::deleteDocumentAction, Role.USER)
server.get("/file/{extId}/download", documentController::downloadFile, 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) server.get("/search", searchController::search, Role.USER)

6
app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt
View file

@ -150,10 +150,14 @@ class DocumentController(val modifiers: TemplateModifiers, val repository: Sqlit
fun deleteFileAction(ctx: Context) { fun deleteFileAction(ctx: Context) {
val session = ctx.requireSession() val session = ctx.requireSession()
val extId = ExtId(ctx.pathParam("extId")) val extId = ExtId(ctx.pathParam("extId"))
val ret = ctx.queryParam("return")
repository.setFileState(session.id, extId = extId, state = State.ARCHIVED) repository.setFileState(session.id, extId = extId, state = State.ARCHIVED)
ctx.redirectPRG("/") when (ret) {
"limbo" -> ctx.redirectPRG("/limbo")
else -> ctx.redirectPRG("/")
}
} }
fun editDocumentForm(ctx: Context) { fun editDocumentForm(ctx: Context) {

9
app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt
View file

@ -1,10 +1,8 @@
package net.h34t.filemure.controller package net.h34t.filemure.controller
import io.javalin.http.Context import io.javalin.http.Context
import net.h34t.filemure.TemplateModifiers import net.h34t.filemure.*
import net.h34t.filemure.repository.SqliteRepository 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.Frame
import net.h34t.filemure.tpl.Limbo import net.h34t.filemure.tpl.Limbo
import java.time.format.DateTimeFormatter import java.time.format.DateTimeFormatter
@ -13,7 +11,6 @@ import java.time.format.FormatStyle
class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRepository) { class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRepository) {
private val dtf = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.MEDIUM, FormatStyle.SHORT) 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) { fun formLimbo(ctx: Context) {
val session = ctx.requireSession() val session = ctx.requireSession()
@ -29,8 +26,8 @@ class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRe
extId = f.extId.value, extId = f.extId.value,
file = f.filename, file = f.filename,
type = f.contentType ?: "", type = f.contentType ?: "",
size = f.fileSize.toString(), size = formatHumanReadableSize(f.fileSize),
uploaded = f.created.format(dtf) uploaded = f.created.formatHuman()
) )
}.asSequence() }.asSequence()
}) })

3
app/src/main/tpl/net.h34t.filemure.tpl/Frame.tpl.html
View file

@ -10,6 +10,9 @@
<body> <body>
{if $isTarget} {if $isTarget}
<div class="dropzone"></div> <div class="dropzone"></div>
<dialog id="upload_progress_dialog">
<progress id="upload_progress" max="100"></progress>
</dialog>
{/if} {/if}
{template $content} {template $content}
</body> </body>

8
app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html
View file

@ -20,11 +20,11 @@
<td>{*$type}</td> <td>{*$type}</td>
<td>{*$size}</td> <td>{*$size}</td>
<td>{*$uploaded}</td> <td>{*$uploaded}</td>
<td><a href="/file/{*$extId}/download">
view
</a></td>
<td> <td>
<form action="/file/{*$extId}/delete"><input type="submit" value="delete"></form> <a href="/file/{*$extId}/download"><button>view</button></a>
</td>
<td>
<form action="/file/{*$extId}/delete?return=limbo" method="POST"><input type="submit" value="delete"></form>
</td> </td>
</tr> </tr>
{/for} {/for}

2
public/filemure.css
View file

@ -4,7 +4,6 @@
right: 0px; right: 0px;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
/* visibility: visible; */
display: none; display: none;
border: 0px dotted red; border: 0px dotted red;
margin: 4px; margin: 4px;
@ -13,7 +12,6 @@
.dropzone.dragactive { .dropzone.dragactive {
background-color: #33FF0000; background-color: #33FF0000;
border: 3px dotted blue; border: 3px dotted blue;
/* visibility: visible; */
display: block; display: block;
} }

38
public/filemure.js
View file

@ -2,6 +2,9 @@ document.addEventListener("DOMContentLoaded", function() {
console.log("filemure ready") console.log("filemure ready")
const dropzone = document.querySelector('html'); const dropzone = document.querySelector('html');
let progressDialog = document.querySelector('#upload_progress_dialog')
let progressBar = document.querySelector('#upload_progress')
// window.addEventListener // window.addEventListener
// Prevent default behavior for drag-over and drop // Prevent default behavior for drag-over and drop
@ -28,6 +31,7 @@ document.addEventListener("DOMContentLoaded", function() {
// Process the files // Process the files
for (const file of files) { for (const file of files) {
progressDialog.showModal();
console.log('File name:', file.name); console.log('File name:', file.name);
console.log('File size:', file.size, 'bytes'); console.log('File size:', file.size, 'bytes');
console.log('File type:', file.type); console.log('File type:', file.type);
@ -35,12 +39,34 @@ document.addEventListener("DOMContentLoaded", function() {
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
fetch('/upload', { const xhr = new XMLHttpRequest();
method: 'POST', xhr.upload.addEventListener("progress", (event) => {
body: formData, if (event.lengthComputable) {
}).then(response => response.json()) console.log("upload progress:", event.loaded / event.total);
.then(data => console.log('Upload successful:', data)) progressBar.value = 100.0 * event.loaded / event.total;
.catch(error => console.error('Upload failed:', error)); }
});
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));
} }
} }
}); });