add file preview

Reviewed-on: sites/file-explorer#6
This commit is contained in:
2024-12-06 13:04:56 +00:00
parent a574c3a89a
commit 12730b8bcd
10 changed files with 94 additions and 19 deletions

View File

@ -27,14 +27,14 @@
{{ form_start(fileForm, {'attr': {'data-controller': 'upload-file'}}) }}
<div class="flex items-center justify-center max-w-4xl mt-5">
<label for="upload_file_form_file"
<label for="upload_file_form_files"
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
{{ ux_icon('file:upload', {height: '64px', width: '64px'}) }}
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span>
or drag and drop</p>
</div>
{{ form_widget(fileForm.file) }}
{{ form_widget(fileForm.files) }}
<button type="submit" class="hidden"></button>
</label>
</div>

21
templates/file.html.twig Normal file
View File

@ -0,0 +1,21 @@
{% extends 'base.html.twig' %}
{% block title %}
{{ file.name }}
{% endblock %}
{% block body %}
<div class="max-w-2xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg border">
<a href="{{ routing_service.goBack(app.request) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
Back
</a>
<div class="mt-6 text-gray-700 overflow-auto max-h-96">
<p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
</div>
</div>
{% endblock %}