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 class="uploading images"></div>
</div>
<script>
    const form = document.querySelector("form.upload");
    const element = document.querySelector("form.upload input[type=file]");
    const results = document.querySelector(".uploading.images");
    element.addEventListener("change", () => {
        for (let file of element.files) {
            const reader = new FileReader();
            reader.addEventListener("load", (e) => {
                const node = document.createElement("div");
                node.classList.add("uploading");
                node.classList.add("image");
                const img = document.createElement("img");
                img.src = e.target.result;
                node.appendChild(img);
                results.appendChild(node);
                fetch("/upload", {
                    credentials: "include"
                }).then((response) => {
                    return response.json()
                }).then((json) => {
                    const text = document.createElement("pre");
                    text.innerText = JSON.stringify(json);
                    node.appendChild(text);
                });
            });
            reader.readAsDataURL(file);
        }
    })
</script>
{{end}}