2025-01-02 18:59:37 +01:00

106 lines
2.7 KiB
Smarty

<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
.form-item {
align-self: flex-start;
margin: 10px;
width: 300px;
}
.form-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Upload a book</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="main-container">
<div class="form-item">
<div class="form-container">
<label>Book name:</label>
<input type="text" name="name" value="{{.Name.Value}}" />
</div>
{{ if .Name.Err }}
<div class="error">{{.Name.Err}}</div>
{{ end }}
</div>
<div class="form-item">
<div class="form-container">
<label>Editor:</label>
<input type="text" name="editor" value="{{.Editor.Value}}" />
</div>
{{ if .Editor.Err }}
<div class="error">{{.Editor.Err}}</div>
{{ end }}
</div>
<div class="form-item">
<div class="form-container">
<label>Authors:</label>
<input type="text" name="authors" value="{{.Authors.Value | join}}" />
</div>
{{ if .Authors.Err }}
<div class="error">{{.Authors.Err}}</div>
{{ end }}
</div>
<div class="form-item">
<div class="form-container">
<label>Year:</label>
<input type="number" name="year" value="{{.Year.Value | year}}" />
</div>
{{ if .Year.Err }}
<div class="error">{{.Year.Err}}</div>
{{ end }}
</div>
<div class="form-item">
<div class="form-container">
<label>Keywords:</label>
<input type="text" name="keywords" value="{{.Keywords.Value | join}}" />
</div>
{{ if .Keywords.Err }}
<div class="error">{{.Keywords.Err}}</div>
{{ end }}
</div>
<div class="form-item">
<div class="form-container">
<input type="file" name="file" files="{{.File.Value.Header | filename}}" accept=".pdf" />
<button id="submit" type="submit">Upload</button>
</div>
</div>
</div>
</form>
{{ if .File.Err }}
<div class="error">{{.File.Err}}</div>
{{ end }}
{{ if ne .Error "" }}
<div class="error">{{.Error}}</div>
{{ end }}
</body>
<script type="text/javascript">
var submit = document.getElementById("submit");
submit.addEventListener("submit", function () {
submit.disabled = true;
});
{ { if .IsSuccess } }
alert("file uploaded successfully");
{ { end } }
</script>
</html>