file-explorer/templates/file.html.twig

{% 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">
            {% if file.mimeType starts with 'image' %}
                <img src="{{ path('serve_file', {filePath: file.name}) }}" alt="">
            {% else %}
                <p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
            {% endif %}
        </div>
    </div>
{% endblock %}