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.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)

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) {
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) {

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

@ -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()
})

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

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

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

@ -20,11 +20,11 @@
<td>{*$type}</td>
<td>{*$size}</td>
<td>{*$uploaded}</td>
<td><a href="/file/{*$extId}/download">
view
</a></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>
</tr>
{/for}

2
public/filemure.css
View file

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

48
public/filemure.js
View file

@ -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));
}
}
});