cl-deck-builder2/templates/upload.html
2024-03-05 22:11:33 -05:00

89 lines
2.8 KiB
HTML

{% extends "layouts/default.html" %}
{% block title %}{_ "File Uploader" _}{% endblock %}
{% block content %}
<form name="file-form" id="file-form"
enctype="multipart/form-data" method="post">
{{ token | safe }}
<input type="hidden" name="MAX_FILE_SIZE" value="100000">
</form>
<div class="content">
{% if files %}
<h2>Files</h2>
<div class="columns is-multiline">
{% for image in files %}
<div class="column" id="image-{{ image.id }}">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<p class="image" style="width:64px">
<a href="{{ image.url }}" target="_blank" data-lightbox="{{ image.url }}">
<img class="has-ratio" src="{{ image.icon }}">
</a>
</p>
</div>
<div class="media-content">
<div class="content">
<p><b>File Key:</b> {{ image.attachment.file-key }}</p>
<p><b>File Size:</b> {{ image.attachment.file-size }}</p>
</div>
</div>
<div class="media-right">
<button class="delete"
hx-confirm="Delete {{ image.id }} - Are you sure?"
hx-delete="/upload/{{ image.id }}"
hx-include="[name='file-form']"
hx-swap="outerHTML swap:1s"
hx-target="#image-{{ image.id }}"></button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<hr>
{% endif %}
<div style="flex: 1;">
<div class="columns is-flex is-centered is-vcentered">
<div class="column is-half">
<div class="field">
<div id="file-js" class="file has-name is-boxed is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="files[]" id="files" multiple="multiple" form="file-form">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file&hellip;
</span>
</span>
<span class="file-name">
No file uploaded
</span>
</label>
</div>
{% include "file-js.html" :target "#file-js" %}
</div>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-1">
<div class="field">
<div class="control">
<button class="button is-primary"
form="file-form"
type="submit">Process</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}