upload.html

{{define "title"}}Upload | i.k8r{{end}}
{{define "content"}}
<div class="container centered">
{{range .Results}}
{{if .Success}}
    <div class="alert success">
        <h2>Upload of {{.Id}} finished. <a href="/{{.Id}}">View</a>.</h2>
    </div>
{{else}}
    <div class="alert error">
    {{if .Id}}
        <h2>Upload of {{.Id}} failed.</h2>
    {{else}}
        <h2>Upload failed.</h2>
    {{end}}
    {{range .Errors}}
        <pre>{{.}}</pre>
    {{end}}
    </div>
{{end}}
{{end}}
    <form class="upload" action="/upload/" method="POST" enctype="multipart/form-data">
        <label>
            <span class="text">Select Files</span>
            <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/>
        </label>
        <input type="submit" value="Upload"/>
        <p class="upload-label">Uploading…</p>
    </form>
</div>
<script>
    const form = document.querySelector("form.upload");
    const element = document.querySelector("form.upload input[type=file]");
    element.addEventListener("change", () => {
        form.submit();
        form.classList.add("submitted");
    })
</script>
{{end}}