camper/web/templates/admin/media/upload.gohtml

52 lines
1.9 KiB
Plaintext

<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
{{( pgettext "Upload Media" "title" )}}
{{- end }}
{{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/media.uploadForm*/ -}}
{{ template "settings-tabs" "media" }}
<form id="upload" enctype="multipart/form-data" action="/admin/media" method="post" data-hx-boost="true">
<h2>{{( pgettext "Upload Media" "title" )}}</h2>
{{ CSRFInput }}
<fieldset>
{{ with .File -}}
<label>
{{( pgettext "File" "input" )}}
<input type="file" name="{{ .Name }}"
required {{ template "error-attrs" . }}><br>
</label>
<p>{{ printf (gettext "Maximum upload file size: %s") (.MaxSize | humanizeBytes) }}</p>
{{ template "error-message" . }}
{{- end }}
</fieldset>
<footer>
<button type="submit">{{( pgettext "Upload" "action" )}}</button>
<progress value="0" max="100"></progress>
</footer>
</form>
<script>
htmx.on('#upload', 'drop', function (evt) {
evt.preventDefault();
[...evt.dataTransfer.items].forEach(function (i) {
console.log(i);
i.getAsString(console.log)
});
});
htmx.on('#upload', 'dragover', function (evt) {
evt.preventDefault();
});
htmx.on('#upload', 'dragleave', function (evt) {
evt.preventDefault();
});
htmx.on('#upload', 'htmx:xhr:progress', function (evt) {
if (evt.detail.lengthComputable) {
htmx.find('progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
}
});
</script>
{{- end }}