Improvements #2
|
@ -1,38 +1,37 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html lang="en">
|
||||||
<link rel="stylesheet" type="" href="./style.css">
|
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
|
<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">
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<h1>Raul's file uploader</h1>
|
<h1>Raul's file uploader</h1>
|
||||||
<h3>Find the source <a href="https://git.bulgariu.xyz/raul/uploader" target="_blank">here!</a></h3>
|
<h3>Find the source <a href="https://git.bulgariu.xyz/raul/uploader" target="_blank">here!</a></h3>
|
||||||
<form id='form' hx-encoding='multipart/form-data' hx-post='/api/upload'>
|
<form id='form' hx-encoding='multipart/form-data' hx-post='/api/upload'>
|
||||||
<input type="file" name="file" value="">
|
<input type="file" name="file" value="" required>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<button id="but">
|
<button id="but">
|
||||||
Upload
|
Upload
|
||||||
</button>
|
</button>
|
||||||
<progress id="progress" value="0" max="100">Upload progress:</progress>
|
<progress id="progress" value="0" max="100">Upload progress:</progress>
|
||||||
</form>
|
</form>
|
||||||
<script>
|
<script>
|
||||||
htmx.on('#form', 'htmx:xhr:progress', function(evt) {
|
htmx.on('#form', 'htmx:xhr:progress', function (evt) {
|
||||||
htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
|
htmx.find('#progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100)
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p class="centered">
|
|
||||||
<!-- <img src="https://bulgariu.xyz/avatar.gif" alt="" width=200px height=200px > -->
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- <footer> -->
|
|
||||||
<!-- Licensed under the GPL v3.0 -->
|
|
||||||
<!-- </footer> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -21,6 +21,7 @@ img {
|
||||||
button {
|
button {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
border: 2px black solid;
|
border: 2px black solid;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#but:hover {
|
#but:hover {
|
||||||
|
|
Loading…
Reference in New Issue