File Manager Lite

Dir: /home/codewavebd/public_html/resources/views/admin/media

index.blade.php (4.12 KB)

Edit: index.blade.php

@extends('layouts.admin')

@section('title', 'Media Manager')
@section('page_title', 'Media Library')

@section('content')

<div class="row g-4 mb-5">
    
    <div class="col-lg-4">
        <div class="admin-card border-info">
            <h5 class="font-heading text-white border-bottom border-secondary pb-3 mb-3">Upload File</h5>
            <p class="small text-muted mb-4">Any uploaded jpeg, png, or gif will be optimized and converted to WebP automatically with 80% quality compression.</p>

<form action="{{ route('admin.media.upload') }}" method="POST" enctype="multipart/form-data" class="admin-form">
                @csrf
                <div class="mb-4">
                    <label class="form-label text-secondary small">Choose Image</label>
                    <input type="file" name="file" class="form-control" accept="image/*" required>
                </div>
                <button type="submit" class="btn btn-primary-glow w-100 py-3">Upload and Optimize</button>
            </form>
        </div>
    </div>

<div class="col-lg-8">
        <div class="admin-card">
            <h5 class="font-heading text-white border-bottom border-secondary pb-3 mb-4"><i class="bi bi-images text-info me-2"></i>Media Assets</h5>

<div class="row g-3">
                @forelse($mediaFiles as $media)
                    <div class="col-sm-6 col-md-4">
                        <div class="media-card">
                            <div class="media-image-wrap p-2 text-center">
                                <img src="{{ $media['url'] }}" alt="{{ $media['name'] }}" loading="lazy">
                            </div>
                            <div class="p-3 border-top border-secondary bg-dark">
                                <h6 class="text-white text-truncate mb-1 small" title="{{ $media['name'] }}">{{ $media['name'] }}</h6>
                                <span class="text-muted d-block" style="font-size: 11px;">Size: {{ $media['size'] }} &bull; {{ $media['time'] }}</span>
                                
                                <div class="d-flex justify-content-between mt-3 pt-2 border-top border-secondary">
                                    <button class="btn btn-sm btn-outline-info rounded-pill px-3 py-1 font-monospace" style="font-size: 11px;" onclick="copyFilename('{{ $media['name'] }}', this)">
                                        Copy Name
                                    </button>
                                    
                                    <form action="{{ route('admin.media.destroy') }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this file? This will break any pages using this file.')">
                                        @csrf
                                        <input type="hidden" name="filename" value="{{ $media['name'] }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger border-0 rounded-circle"><i class="bi bi-trash"></i></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <h6 class="text-muted font-heading">No media files uploaded yet.</h6>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<script>
    function copyFilename(text, button) {
        navigator.clipboard.writeText(text).then(() => {
            const originalText = button.innerText;
            button.innerText = 'Copied!';
            button.className = 'btn btn-sm btn-success rounded-pill px-3 py-1';
            setTimeout(() => {
                button.innerText = originalText;
                button.className = 'btn btn-sm btn-outline-info rounded-pill px-3 py-1';
            }, 1500);
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    }
</script>

@endsection