Flask-Files/app/templates/files/browser.html

{% extends "base.html" %}

{% block title %}File Browser - Flask Files{% endblock %}

{% block content %}
<section class="file-browser">
    <div class="browser-header">
        <h2>File Browser</h2>
        <div class="browser-actions">
            <a href="{{ url_for('files.upload', folder=current_folder.id if current_folder else None) }}"
                class="btn primary">
                <i class="fas fa-cloud-upload-alt"></i> Upload
            </a>
            <button class="btn" id="new-folder-btn">
                <i class="fas fa-folder-plus"></i> New Folder
            </button>
        </div>
    </div>

    <div class="path-nav">
        <a href="{{ url_for('files.browser') }}" class="path-item">
            <i class="fas fa-home"></i> Home
        </a>
        {% for folder in breadcrumbs %}
        <span class="path-separator">/</span>
        <a href="{{ url_for('files.browser', folder=folder.id) }}" class="path-item">{{ folder.name }}</a>
        {% endfor %}
    </div>

    {% if folders or files %}
    <div class="files-container">
        {% if folders %}
        <div class="folder-section">
            <h3>Folders</h3>
            <div class="files-list">
                {% for folder in folders %}
                <div class="file-item folder">
                    <a href="{{ url_for('files.browser', folder=folder.id) }}" class="file-link">
                        <div class="file-icon">
                            <i class="fas fa-folder fa-2x"></i>
                        </div>
                        <div class="file-name">{{ folder.name }}</div>
                    </a>
                    <div class="file-actions">
                        <button class="action-btn rename" data-id="{{ folder.id }}" title="Rename">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" data-id="{{ folder.id }}" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if files %}
        <div class="file-section">
            <h3>Files</h3>
            <div class="files-list">
                {% for file in files %}
                <div class="file-item">
                    <div class="file-link">
                        <div class="file-icon">
                            {% if file.name.endswith('.pdf') %}<i class="fas fa-file-pdf fa-2x"></i>
                            {% elif file.name.endswith(('.jpg', '.jpeg', '.png', '.gif')) %}<i
                                class="fas fa-file-image fa-2x"></i>
                            {% elif file.name.endswith(('.mp3', '.wav', '.flac')) %}<i
                                class="fas fa-file-audio fa-2x"></i>
                            {% elif file.name.endswith(('.mp4', '.mov', '.avi')) %}<i
                                class="fas fa-file-video fa-2x"></i>
                            {% elif file.name.endswith(('.doc', '.docx')) %}<i class="fas fa-file-word fa-2x"></i>
                            {% elif file.name.endswith(('.xls', '.xlsx')) %}<i class="fas fa-file-excel fa-2x"></i>
                            {% elif file.name.endswith(('.ppt', '.pptx')) %}<i class="fas fa-file-powerpoint fa-2x"></i>
                            {% elif file.name.endswith('.zip') %}<i class="fas fa-file-archive fa-2x"></i>
                            {% else %}<i class="fas fa-file fa-2x"></i>{% endif %}
                        </div>
                        <div class="file-details">
                            <div class="file-name">{{ file.name }}</div>
                            <div class="file-meta">
                                <span class="file-size">{{ (file.size / 1024)|round(1) }} KB</span>
                                <span class="file-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="file-actions">
                        <a href="#" class="action-btn download" data-id="{{ file.id }}" title="Download">
                            <i class="fas fa-download"></i>
                        </a>
                        <a href="#" class="action-btn share" data-id="{{ file.id }}" title="Share">
                            <i class="fas fa-share-alt"></i>
                        </a>
                        <button class="action-btn rename" data-id="{{ file.id }}" title="Rename">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="action-btn delete" data-id="{{ file.id }}" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">
            <i class="fas fa-folder-open fa-3x"></i>
        </div>
        <p>This folder is empty</p>
        <p>Upload files or create a new folder to get started</p>
        <div class="empty-actions">
            <button class="btn primary" data-action="upload"
                data-folder-id="{{ current_folder.id if current_folder else None }}">
                <i class="fas fa-cloud-upload-alt"></i> Upload Files
            </button>
            <button class="btn" id="empty-new-folder-btn">
                <i class="fas fa-folder-plus"></i> New Folder
            </button>
        </div>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // New folder functionality
        const newFolderBtn = document.getElementById('new-folder-btn');
        const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');

        function showNewFolderPrompt() {
            const folderName = prompt('Enter folder name:');
            if (folderName) {
                createNewFolder(folderName);
            }
        }

        function createNewFolder(name) {
            const formData = new FormData();
            formData.append('name', name);

            {% if current_folder %}
            formData.append('parent_id', '{{ current_folder.id }}');
            {% endif %}

            fetch('/files/create_folder', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.error || 'Failed to create folder');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while creating the folder');
                });
        }

        if (newFolderBtn) {
            newFolderBtn.addEventListener('click', showNewFolderPrompt);
        }

        if (emptyNewFolderBtn) {
            emptyNewFolderBtn.addEventListener('click', showNewFolderPrompt);
        }
    });
</script>
{% endblock %}