2024-05-29 08:45:44 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>File Uploader</title>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<script src="https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js"></script>
|
|
|
|
|
<link href="./style.css" rel="stylesheet">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<!-- Licensed under the GPL v3.0 -->
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2024-04-30 12:10:49 +02:00
|
|
|
<div id="main">
|
2024-05-29 08:45:44 +02:00
|
|
|
<h1>Raul's file uploader</h1>
|
|
|
|
|
<h3>Find the source <a href="https://git.bulgariu.xyz/raul/uploader" target="_blank">here!</a></h3>
|
2024-04-30 12:10:49 +02:00
|
|
|
<form id='form' hx-encoding='multipart/form-data' hx-post='/api/upload'>
|
2024-05-29 08:45:44 +02:00
|
|
|
<input type="file" name="file" value="" required>
|
2024-04-30 12:10:49 +02:00
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<button id="but">
|
|
|
|
|
Upload
|
|
|
|
|
</button>
|
2024-05-29 08:45:44 +02:00
|
|
|
<progress id="progress" value="0" max="100">Upload progress:</progress>
|
2024-04-30 12:10:49 +02:00
|
|
|
</form>
|
2024-05-01 08:42:54 +02:00
|
|
|
<script>
|
2024-05-29 08:45:44 +02:00
|
|
|
htmx.on('#form', 'htmx:xhr:progress', function (evt) {
|
|
|
|
|
htmx.find('#progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100)
|
2024-05-01 08:42:54 +02:00
|
|
|
});
|
|
|
|
|
</script>
|
2024-04-30 12:10:49 +02:00
|
|
|
</div>
|
2024-05-29 08:45:44 +02:00
|
|
|
</div>
|
|
|
|
|
</body>
|
2024-04-30 12:10:49 +02:00
|
|
|
|
|
|
|
|
</html>
|
