89 lines
2.8 KiB
HTML
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…
|
||
|
|
</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 %}
|