file-server example: add upload using javascript button

Former-commit-id: caaec95388e691c2db27a55e649c758f93ab537c
This commit is contained in:
Gerasimos (Makis) Maropoulos 2020-07-05 15:12:19 +03:00
parent 57dc64625d
commit bdfe8de66d
2 changed files with 34 additions and 7 deletions

View File

@ -20,6 +20,8 @@ func init() {
func main() { func main() {
app := iris.New() app := iris.New()
app.RegisterView(iris.HTML("./views", ".html")) app.RegisterView(iris.HTML("./views", ".html"))
// Serve assets (e.g. javascript, css).
// app.HandleDir("/public", "./public")
app.Get("/", index) app.Get("/", index)
@ -47,10 +49,14 @@ func uploadView(ctx iris.Context) {
ctx.View("upload.html", token) ctx.View("upload.html", token)
} }
const maxSize = 10 * iris.MB
func upload(ctx iris.Context) { func upload(ctx iris.Context) {
ctx.SetMaxRequestBodySize(maxSize)
_, err := ctx.UploadFormFiles("./uploads", beforeSave) _, err := ctx.UploadFormFiles("./uploads", beforeSave)
if err != nil { if err != nil {
ctx.StopWithError(iris.StatusInternalServerError, err) ctx.StopWithError(iris.StatusPayloadTooRage, err)
return return
} }

View File

@ -1,17 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Files</title> <title>Upload Files</title>
</head> </head>
<body> <body>
<form enctype="multipart/form-data" <form enctype="multipart/form-data" action="/upload" method="POST">
action="/upload" method="POST"> <input type="file" id="upload_files" name="upload_files" multiple /> <input type="hidden" name="token"
<input type="file" name="uploadfile" multiple/> <input type="hidden" value="{{.}}" />
name="token" value="{{.}}" />
<input type="button" value="Upload Using Javascript" onclick="uploadFiles()" />
<input type="submit" value="upload" /> <input type="submit" value="Upload by submiting the form" />
</form> </form>
<script type="text/javascript">
function uploadFiles() {
let files = document.getElementById("upload_files").files;
let formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files[]", files[i]);
}
fetch('/upload',
{
method: "POST",
body: formData
}).
then(data => window.location = "/files").
catch(e => window.alert("upload failed: file too large"));
}
</script>
</body> </body>
</html> </html>