PHP8 - Laravel 12

Appearance

Admin: Managing Covers ​

This chapter delves into equipping your administrative panel with the capability to manage album cover images. We will explore how to empower your team to meticulously control cover art for individual records, including the ability to upload fresh images, revert to original artwork sourced from MusicBrainz, and even remove covers entirely. Beyond individual record management, we will also implement a practical tool for identifying and tidying up "orphaned" cover images—those lingering in your storage without an associated record in the database.

REMARK

While these two functionalities could be perfectly segmented onto distinct pages, we've opted to integrate them within a single Livewire component. This approach serves a didactic purpose, showcasing how route parameters are passed and consumed by Livewire components, providing a flexible single-page administration experience for cover management.

Preparation ​

Create a Covers Component ​

Open your terminal within the project directory and execute the following Artisan command:

bash
php artisan livewire:make Admin/Covers

This command conveniently creates two files:

  • app/Livewire/Admin/Covers.php: The component's PHP class.
  • resources/views/livewire/admin/covers.blade.php: The component's Blade view file.

Add a New Route ​

To make our new admin page accessible, we need to define a route in Laravel's routing system. This route will incorporate a route-parameter, which allows us to pass a specific record's ID to the component, making the page dynamic.

  • Open the routes/web.php file.
  • Add a new route definition within the Route::middleware(['auth', ActiveUser::class, Admin::class])->prefix('admin')->group(...) block that maps the /admin/covers/{id?} URL path to the App\Livewire\Admin\Covers component class.
  • Assign the route a name, admin.covers, for easy URL generation.
php
Route::middleware(['auth', ActiveUser::class, Admin::class])->prefix('admin')->group(function () {
    Route::redirect('/', '/admin/records');
    Route::get('records', Records::class)->name('admin.records');
    Route::get('genres', Genres::class)->name('admin.genres'); 
    Route::get('users/basic', UsersBasic::class)->name('admin.users.basic');
    Route::get('users/advanced', UsersAdvanced::class)->name('admin.users.advanced');
    Route::get('users/expert', UsersExpert::class)->name('admin.users.expert');
    Route::get('covers/{id?}', Covers::class)->name('admin.covers');    
    Route::view('download_covers', 'admin.download_covers')->name('download_covers');
});

ROUTE-PARAMETERS

In our route definition, Route::get('covers/{id?}', Covers::class)->name('admin.covers');, the {id?} segment is pivotal. It declares a route parameter named id.

  • The curly braces {} signify a variable portion of the URL. Laravel automatically captures whatever value is in this segment and makes it available to your controller methods or, in Livewire's case, your component methods.
  • The ? appended to id (i.e., id?) denotes that this parameter is optional. This offers great flexibility, enabling access to the route in two distinct ways:
    • https://vinyl_shop.test/admin/covers/123: Here, 123 is captured and passed as the id parameter to your Livewire component.
    • https://vinyl_shop.test/admin/covers: In this instance, no id is provided in the URL, and consequently, the id parameter will be null by default within your Livewire component's receiving method (e.g., mount()).

A critical point for smooth operation is that the name of the parameter declared in the route (id) must precisely match the name of the parameter in your Livewire component's mount() method (or any other public method designed to accept route parameters). Laravel's routing system, in conjunction with Livewire, intelligently handles the automatic mapping of these URL segments to your component's method arguments.

With the route established, let's seamlessly integrate this new page into the administrative section of our main navigation bar for easy access.

  • Open the resources/views/components/layouts/vinylshop/navbar.blade.php file.
  • Locate the <flux:navlist.item> element responsible for the "Covers" link within the @auth block.
  • Update its href attribute to dynamically generate the URL using Laravel's route() helper:
    {{ route('admin.covers') }}.
php
@auth
    <flux:separator variant="subtle"/>
    <flux:navlist.group expandable heading="Admin">
        {{-- Other admin links --}}
        <flux:navlist.item href="{{ route('admin.covers') }}">Covers</flux:navlist.item>
        {{-- Other admin links --}}
    </flux:navlist.group>
@endauth

Add a Link on the Records Page ​

To easily navigate to the "Covers" page for a specific record, let's add a button to the Records admin table.

  • Open the file resources/views/livewire/admin/records.blade.php.
  • Locate the <flux:button.group> section where the action buttons for each record are defined.
  • Modify the button group to include a new button that links to the admin.covers route, passing the record's ID as a parameter.
  • Update the button's tooltip to indicate that it will allow editing the cover image for that record.
php
<flux:button.group>
    <flux:button
        wire:click="editRecord({{ $record->id }})"
        tooltip="Edit"
        icon="pencil-square"/>
    <flux:button
        href="{{ route('admin.covers', $record->id) }}"
        tooltip="Edit cover"
        icon="photo"/>
    <flux:button
        wire:click="deleteConfirm({{ $record->id }})"
        tooltip="Delete {{ $record->title }} by {{ $record->artist }}" {{-- Update tooltip for clarity --}}
        icon="trash"/>
</flux:button.group>

Basic Scaffolding for the View ​

With the component and route now firmly in place, it's time to lay down the foundational structure for our covers.blade.php view and establish the essential public properties within its accompanying Livewire component. Our page is designed to accommodate two primary display modes:

  • one dedicated to managing the cover of a specific record (activated when an id is present in the URL)
  • and another tailored for overseeing all unassociated covers (when noid is provided).

Begin by opening resources/views/livewire/admin/covers.blade.php and replacing its existing content with the complete HTML structure provided below. Concurrently, open app/Livewire/Admin/Covers.php and define the necessary public properties. These include $record (which will hold the details of the selected record), $unusedCovers (an array to store a list of any orphaned cover images), and $newCover (a temporary property designated for handling file uploads). Remember to also include the required use statements at the top of the PHP file for proper class resolution.

  • Open resources/views/livewire/admin/covers.blade.php.
  • Replace its content with the provided final HTML structure.
  • Open app/Livewire/Admin/Covers.php.
  • Add the necessary public properties for record (to store the selected record), unusedCovers (to store a list of orphaned covers), and newCover (for file uploads). Also, include required use statements.
php
<?php

namespace App\Livewire\Admin;

use App\Models\Record;
use App\Traits\NotificationsTrait;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Laravel\Facades\Image;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;

class Covers extends Component
{
    use WithFileUploads;
    use NotificationsTrait;

    public $record = null;
    public $unusedCovers = []; 

    #[Validate('image|mimes:jpg,jpeg,png,webp|max:2048')] // 2MB Max
    public $newCover;

    public function mount($id = null)
    {
        if ($id) {
            $this->record = Record::findOrFail($id);
        } else {
            $this->findUnusedCovers();
        }
    }

    public function findUnusedCovers() { /* ... */ }
    
    public function uploadCover() { /* ... */ }
    
    public function resetCover() { /* ... */ }
    
    public function deleteConfirm() { /* ... */ }
    
    #[On('delete-cover-confirmed')]
    public function deleteCover() { /* ... */ }
    
    public function deleteUnusedConfirm($coverPath) { /* ... */ }
    
    #[On('delete-unused-confirmed')] 
    public function deleteUnusedCover($path) { /* ... */ }

    public function render()
    {
        return view('livewire.admin.covers');
    }
}

TIP

  • Do not be concerned if you happen to delete a cover associated with a record. You can effortlessly retrieve any cover at any time by visiting the dedicated URL: https://vinyl_shop.test/admin/download_covers.
  • To test the "unused covers" functionality, consider adding one or more records to your database that initially lack a cover image. Good examples include records with these mb_ids:
    • 58dcd354-a89a-48ea-9e6e-e258cb23e11d (Ramones - End of the Century)
    • 794c6bf2-3241-416f-9b8f-24e2d84a1c4b (The Stooges - Fun House)
    • a36348b3-1950-49fe-b895-49f586afc895 (Daan - Le Franc Belge)
    • ff6284f3-d5f3-4a13-b839-d64a468aa430 (Lidia Lunch - Queen of Siam)
  • Remember, you can always revert your database to its initial state by running the command php artisan migrate:fresh --seed.

Part 1: Managing a Specific Record's Cover ​

This section focuses on the specific functionalities that become available when you navigate to the /admin/covers/{id} route, allowing for targeted management of a single record's cover art.

Get the Selected Record ​

When a Livewire component is first initialized, its mount() method is the very first piece of code to execute. This critical lifecycle hook is where we'll implement the logic to check if an id parameter was provided in the URL. If so, we'll leverage Laravel's powerful Eloquent ORM to fetch the corresponding record from the database, making its data available throughout our component.

  • app/Livewire/Admin/Covers.php
    • Within the mount() method, you'll find the conditional logic that inspects the $id parameter. If $id holds a value (meaning a specific record ID was passed in the URL), Record::findOrFail($id) is invoked to retrieve the record, which is then assigned to the $this->record public property. Conversely, if $id is null, the component transitions to handling the "unused covers" logic, which we will explore in Part 2.
  • resources/views/livewire/admin/covers.blade.php
    • Observe how the title and description displayed in the page's layout dynamically adapt based on the presence of the $record property. This conditional rendering ensures the user interface is always relevant to the current context.
    • Following this, another conditional block (@if($record)) dictates which distinct section of the view is rendered, seamlessly switching between the "specific record management" and "unused covers management" interfaces.
    • As a best practice for development and debugging, remember to include the Livewire log component at the very end of your Blade file.
php
public function mount($id = null)
{
    if ($id) {
        // Get the selected record if id is not null
        $this->record = Record::findOrFail($id);
    } else {
        // Logic for finding unused covers (implemented in Part 2)
        $this->findUnusedCovers();
    }
}

mount() vs render()

Understanding the lifecycle of Livewire components is fundamental to building robust and efficient applications. Two of the most significant methods in this lifecycle are mount() and render():

  • mount(): Consider this method as the component's constructor. It is invoked only once when the Livewire component is initially instantiated on the page. This makes it the perfect place for performing any one-time setup tasks that don't need to be repeated on subsequent re-renders. Typical uses include:
    • Fetching initial, relatively static data (e.g., options for a dropdown list).
    • Assigning default values to public properties.
    • Processing and utilizing route parameters passed from the URL. Crucially, mount() always executes before render().
  • render(): This method is called every time Livewire determines that the component's view needs to be updated and re-drawn. This dynamic re-rendering occurs after any changes to public properties, following the execution of an action method (e.g., a button click), or upon the initial page load (immediately after mount() completes). Its primary responsibility is to fetch data that might change frequently (such as paginated lists or real-time search results) and then pass this fresh data to the Blade view for display.

By strategically fetching the $record within the mount() method, we ensure that this data is loaded only once when the page is initially accessed. This approach significantly improves efficiency, as Livewire does not need to re-query the database for the record on every subsequent interaction with the component (e.g., when uploading a new cover), leading to a snappier user experience.

find() vs findOrFail()

When retrieving a single record from your database using its primary key, Laravel's Eloquent ORM provides two distinct methods: find() and findOrFail(). Choosing between them depends on how you want to handle scenarios where the record might not exist.

  • Record::find($id): This method attempts to locate a database record using the provided ID.
    • If a record matching the ID is successfully found, find() will return an instance of the Record model, populated with that record's data.
    • However, if no record corresponds to the given ID, this method gracefully returns null. This allows you to explicitly check for null and handle the absence of the record programmatically (e.g., display a custom message).
  • Record::findOrFail($id): Like find(), this method also attempts to locate a record by its ID.
    • If a record is found, it returns the Record model instance, identical to find().
    • The crucial difference lies in its behavior when no record is found. Instead of returning null, findOrFail() will immediately throw a ModelNotFoundException. By default, Laravel is configured to catch this exception and automatically render a 404 HTTP response page to the user.

In this particular use case, where navigating to a specific record's cover management page implicitly assumes that the record should exist, findOrFail() is generally the preferred choice. It elegantly integrates with Laravel's built-in exception handling, ensuring that if a user attempts to access a non-existent record (e.g., by manually typing /admin/covers/999 in the URL), they are automatically presented with a standard 404 "Not Found" page, without requiring additional conditional checks in your component logic.

Display Cover and Record Info ​

The administration view intelligently adapts its content based on whether a specific $record has been set in the Livewire component. When $record holds data, the interface prominently displays the record's essential details alongside its current cover image.

To ensure that your users always see the most up-to-date cover image, even if you update the underlying file without changing its name (a common scenario that can lead to stale images due to browser caching), we'll employ a technique called cache busting.

  • resources/views/livewire/admin/covers.blade.php
    • Locate the img tag responsible for displaying the cover. Notice how we append a dynamic query string, using ?v={{ time() }}, to the image's src attribute. This addition is crucial for cache busting, as it tricks the browser into perceiving a "new" URL on each re-render, thus compelling it to fetch the latest version of the image from the server rather than serving a cached copy.
    • Immediately below the image, the record's artist and title are displayed. The provided styling ensures they are presented clearly and attractively to the administrator.
php
<div class="lg:col-span-1">
    <div
        class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-md overflow-hidden">
        <img src="{{ $record->cover }}?v={{ time() }}" alt="Cover for {{ $record->title }}"
             class="w-full object-cover aspect-square">
        <div class="p-4 text-center">
            <h3 class="text-lg font-bold">{{ $record->artist }}</h3>
            <p class="italic font-bold text-teal-700 dark:text-teal-300">{{ $record->title }}</p>
        </div>
    </div>
</div>

BROWSER CACHE BUSTING

When a web browser loads assets like images, it frequently stores a local copy in its cache. This caching mechanism is designed to significantly speed up subsequent page loads by avoiding redundant downloads of the same resources. However, this efficiency can become a challenge when you update an image on the server but retain its original filename. In such cases, the browser, relying on its cache, might continue to display the older, cached version of the image instead of the newly updated one.

To circumvent this, we employ a technique known as cache busting. By appending a dynamic query parameter, such as ?v={{ time() }}, to the image's URL, we effectively create a "new" and unique URL each time the Livewire component re-renders. This subtle change in the URL, despite pointing to the same underlying file, signals to the browser that it's encountering a different resource. Consequently, the browser is forced to bypass its cache and request the image from the server again, guaranteeing that the user always sees the most current version of the cover art. The time() function, which returns the current Unix timestamp in seconds, provides a sufficiently unique value for this purpose, ensuring effective cache invalidation.

Upload a New Cover ​

This essential feature empowers administrators to seamlessly upload a brand-new cover image directly from their local computer. Livewire's robust capabilities make this process remarkably smooth, handling the complexities of file uploads (not limited to just images) with ease and even offering the convenience of displaying a real-time preview of the selected image.

  • app/Livewire/Admin/Covers.php:
    • First, ensure that the use Livewire\WithFileUploads; trait is correctly imported at the top of your PHP file and then used within the class definition (use WithFileUploads;). This trait provides Livewire's powerful file upload capabilities.
    • Next, declare the $newCover public property. This property will temporarily hold the uploaded file. It's crucial to annotate it with #[Validate] attributes to enforce immediate validation rules, such as image (ensuring it's an image), mimes:jpg,jpeg,png,webp (restricting file types), and max:2048 (setting a maximum file size of 2MB).
    • Finally, implement the uploadCover() method. This method orchestrates the entire upload process: it triggers the file validation, processes the image (e.g., resizing, cropping, and compression) using the Intervention/Image library, saves the optimized image to your configured storage disk, and then refreshes the Livewire component's state to reflect the updated cover.
  • resources/views/livewire/admin/covers.blade.php:
    • Within the PART 1 block of your Blade view (the section that renders when $record is true), locate the "Upload new cover" form.
    • The <flux:input type="file"> element is connected to the $newCover public property using wire:model="newCover".
    • The accept="image/*" attribute on the input restricts the file picker to only show image files, enhancing user experience.
    • A div element, annotated with wire:loading wire:target="newCover", provides immediate visual feedback to the user, displaying a "Uploading cover..." message while the file is being processed.
    • The form itself uses wire:submit="uploadCover()" to trigger the upload logic when submitted.
    • Crucially, conditional rendering is applied: the image preview and the "Upload" button only become visible ( @if ($newCover)) once a file has been selected in the input. The preview dynamically displays the selected image using Livewire's $newCover->temporaryUrl() method, which generates a short-lived URL for the uploaded file before it's permanently stored.
php
class Covers extends Component
{
    use WithFileUploads;        
    use NotificationsTrait;

    public $record = null;
    public $unusedCovers = [];

    #[Validate('image|mimes:jpg,jpeg,png,webp|max:2048')] // 2MB Max
    public $newCover;

    // ... other methodes ...

    public function uploadCover() 
    {
        $this->validate(); // Validate the file input based on #[Validate] attribute
        $mbId = $this->record->mb_id;
        $filename = "covers/{$mbId}.jpg";

        // Process image with Intervention Image and save
        // Reads the uploaded file, crops it to 250x250, encodes as JPEG with 70% quality
        $image = Image::read($this->newCover->getRealPath())->cover(250, 250)->toJpeg(70);
        Storage::disk('public')->put($filename, (string)$image); // Save to public storage

        // Refresh the component state to show the new cover
        $this->record->refresh(); // Re-fetch the record from DB to update its `cover` accessor
        $this->reset('newCover'); // Clear the file input in the form
        $this->toastSuccess('Cover uploaded successfully!', [ // Show success notification
            'position' => 'top-right'
        ]);
    }

    // ... other methods ...
}

To effectively test this new functionality, begin by adding a record to your database that currently lacks a cover image. For example, use the mb_id: 58dcd354-a89a-48ea-9e6e-e258cb23e11d for "Ramones - End of the Century". Once the record is added, navigate to the records page, click the photo icon adjacent to this specific record, and you should be presented with the interface as depicted in the screenshots below.

To start, download a suitable cover image from the internet. A good source might be the Wikipedia page for "End of the Century". Once you have the image, use the provided interface to select and upload it. Upload step 1

Delete the Cover ​

This feature provides us to permanently remove the cover image file linked to a specific record. To safeguard against accidental deletions, a confirmation dialog is integrated into the process, requiring explicit user approval before the action is executed.

  • app/Livewire/Admin/Covers.php:
    • Implement the deleteConfirm() method. This method is responsible for triggering a user-friendly confirmation dialog, leveraging the NotificationsTrait for a consistent UI. If the user affirms their intent to delete, this dialog dispatches a Livewire event named delete-cover-confirmed.
    • Implement the deleteCover() method. This method is an event listener, triggered specifically by the delete-cover-confirmed event. Its core function is to physically remove the image file from the designated storage location and then refresh the component's state to reflect the change (e.g., displaying a default "no cover" image).
  • resources/views/livewire/admin/covers.blade.php:
    • Locate the "Delete cover" button within the Blade view.
    • Attach a wire:click="deleteConfirm()" directive to this button. This ensures that a click initiates the confirmation process before any deletion occurs.
php
class Covers extends Component
{
    // ... properties and other methods ...

    public function deleteConfirm() 
    {
        $this->confirm(
            "Are you sure you want to delete the cover for <b><i>{$this->record->title}</i></b>?",
            [
                'heading' => 'Delete Cover',
                'confirmText' => 'Yes, delete it',
                'next' => [
                    'onEvent' => 'delete-cover-confirmed',
                ]
            ]
        );
    }

    #[On('delete-cover-confirmed')] 
    public function deleteCover()  
    {
        $coverPath = "covers/{$this->record->mb_id}.jpg";
        if (Storage::disk('public')->exists($coverPath)) {
            Storage::disk('public')->delete($coverPath); // Delete the file from public storage
            $this->record->refresh(); // Refresh to show the default 'no-cover.png'
            $this->toastInfo("The cover has been deleted.", [
                'position' => 'top-right'
            ]);
        } else {
            $this->toastError("No cover file existed to delete.", [
                'position' => 'top-right'
            ]);
        }
    }

    // ... other methods ...
}

When the "Delete" button is activated, a distinct confirmation dialog will gracefully emerge, prompting for explicit approval before proceeding with the cover image deletion. If the user confirms their decision, a delete-cover-confirmed event is subsequently dispatched. Delete cover

This feature offers a convenient shortcut for administrators, enabling them to quickly search for alternative cover images directly on Google. This is particularly useful if the MusicBrainz API doesn't yield a satisfactory result or if a different aesthetic is desired.

  • resources/views/livewire/admin/covers.blade.php:
    • Locate the "Search" button within the Blade view.
    • The href attribute of this button is dynamically constructed to generate a targeted Google Images search query. This query is intelligently formed using the record's artist and title.
    • The urldecode() function plays a crucial role here, ensuring that the search query is correctly formatted for inclusion in a URL (e.g., spaces are properly encoded as + symbols).
    • The target="cover" attribute is a thoughtful touch; it instructs the browser to open the search results in a new tab or window specifically named "cover". This means that subsequent clicks on the "Search" button will intelligently reuse the same tab/window, preventing a proliferation of new browser windows and maintaining a cleaner workspace.
php
<div class="p-4 flex items-center justify-between border-t border-zinc-200 dark:border-zinc-700">
    <div>
        <p class="font-semibold">Search image</p>
        <p class="text-sm text-gray-500">Use Google Images to find a cover.</p>
    </div>
    <flux:button
        href="https://www.google.com/search?udm=2&q={{ urldecode('LP cover ' . $record->artist . ' - ' . $record->title) }}"
        target="cover"
        icon="magnifying-glass" variant="filled">Search
    </flux:button>
</div>

Upon clicking the "Search" button, a new browser tab or window will seamlessly open, displaying the Google Images search results tailored to your record's artist and title. Search image

Reset Cover from MusicBrainz ​

This powerful feature provides administrators with the ability to revert any custom-uploaded cover image back to the original cover art. This original image is fetched directly from the authoritative MusicBrainz Cover Art Archive API, ensuring authenticity and consistency.

  • app/Livewire/Admin/Covers.php:
    • Implement the resetCover() method. This method meticulously constructs the appropriate MusicBrainz API URL by incorporating the record's unique mb_id. It then initiates an HTTP request to fetch the image data. Once retrieved, the image is processed using the Intervention/Image library (which can handle resizing, cropping, and quality compression), and finally, it's saved to your designated storage location. Robust error handling is also integrated to gracefully manage potential issues such as API failures, ensuring a resilient user experience.
  • resources/views/livewire/admin/covers.blade.php:
    • Locate the "Reset" button within the Blade view.
    • Attach a wire:click="resetCover()" directive to this button. This instructs Livewire to execute the resetCover() method when the button is pressed.
    • Enhance the user experience by including wire:loading elements. These elements provide visual feedback (e.g., displaying "Resetting...") to the user, indicating that an asynchronous API call is in progress and preventing confusion during potential delays.
php
class Covers extends Component
{
    // ... properties and other methods ...

    public function resetCover() 
    {
        $mbId = $this->record->mb_id;
        $imageUrl = "https://coverartarchive.org/release/{$mbId}/front-250.jpg";

        try {
            // Fetch image from Cover Art Archive with a timeout
            $response = Http::timeout(15)->get($imageUrl);

            if ($response->successful()) {
                // Process the fetched image: read, convert to JPEG with 75% quality
                $image = Image::read($response->body())->toJpeg(75);
                // Save the image to public storage with the record's mb_id as filename
                Storage::disk('public')->put("covers/{$mbId}.jpg", (string)$image);
                $this->record->refresh(); // Refresh to show the new image
                $this->toastSuccess("Cover reset from MusicBrainz API.", [
                    'position' => 'top-right'
                ]);
            } else {
                // If API response is not successful (e.g., 404), notify user
                $this->toastError("No cover found on Cover Art Archive for this release.", [
                    'position' => 'top-right'
                ]);
            }
        } catch (\Exception $e) {
            // Catch any exceptions during HTTP request or image processing
            $this->toastError("Failed to fetch cover. The API might be down or the request timed out.", [
                'position' => 'top-right'
            ]);
        }
    }

    // ... other methods ...
}

When the "Reset" button is engaged and the system is unable to locate the corresponding cover on the MusicBrainz API, a clear and concise error message will be promptly displayed to inform the user. Reset cover

Part 2: Managing Unused Covers ​

This section illuminates the functionalities available when you access the /admin/covers route without providing a specific record ID. In this mode, the page transforms into a utility for identifying and managing cover images that exist in your storage directories but are no longer linked to any active record within your database—effectively, " orphaned" images.

Finding Unused Covers ​

When the mount() method detects that the $id parameter is null (meaning no specific record was requested), it intelligently invokes the findUnusedCovers() method. This method is meticulously crafted to compare all existing cover files in your storage with the mb_ids (MusicBrainz IDs) of records currently present in your database. Its core purpose is to accurately identify and compile a list of any images that are no longer associated with a live record, preparing them for review or cleanup.

  • app/Livewire/Admin/Covers.php:
    • Implement the findUnusedCovers() method. This method first efficiently retrieves all mb_ids from your records table, transforming them into their anticipated storage paths (e.g., covers/{mb_id}.jpg). Concurrently, it enumerates all files within your covers storage directory, carefully excluding the default no-cover.png placeholder. The crucial step then involves using the array_diff function. This powerful PHP function calculates the difference between the set of all existing cover files and the set of actively used cover paths, yielding a precise list of truly orphaned images, which are then assigned to the $this->unusedCovers public property for display.
php
class Covers extends Component
{
    // ... properties ...

    public function findUnusedCovers() 
    {
        // Get all mb_ids from records and convert them to their expected cover storage paths
        $usedMbIds = Record::pluck('mb_id')
            ->map(fn($mbId) => "covers/{$mbId}.jpg")
            ->all();

        // Get all cover files in the 'covers' directory, excluding the default 'no-cover.png'
        $allCoverFiles = array_diff(
            Storage::disk('public')->files('covers'),
            ['covers/no-cover.png'] // Exclude the default placeholder cover
        );

        // Calculate the difference: files that exist in storage but are NOT in the list of used covers
        $this->unusedCovers = array_diff($allCoverFiles, $usedMbIds);
    }

    // ... mount() and other methods ...
}

Delete Unused Covers ​

The workflow for deleting unused covers mirrors the process for removing a specific record's cover, centrally relying on a robust confirmation dialog to prevent unintended data loss. The user interface presents a clear grid layout of all identified unused covers, with each image featuring an intuitive delete button.

  • app/Livewire/Admin/Covers.php:
    • Implement the deleteUnusedConfirm($coverPath) method. This method is responsible for initiating and displaying the confirmation dialog. Crucially, it passes the full path of the unused cover to this dialog, ensuring the user is fully aware of which specific file is targeted for deletion.
    • Implement the deleteUnusedCover($path) method. This method functions as an event listener, specifically activated by the delete-unused-confirmed event. Once triggered, it proceeds to physically remove the specified file from storage. Following the successful deletion, it refreshes the list of displayed unusedCovers by invoking findUnusedCovers() again, ensuring the UI accurately reflects the current state of orphaned files.
  • resources/views/livewire/admin/covers.blade.php:
    • Within the VIEW 2 block (the section rendered when $record is false), observe the loop that iterates through $unusedCovers.
    • For each $coverPath in this loop, the image is displayed using Storage::url($coverPath), which generates a publicly accessible URL for the stored file. A delete button is then rendered for each image, linked to the wire:click="deleteUnusedConfirm('')" directive. This ensures that clicking the button initiates the confirmation flow for that particular unused cover.
php
class Covers extends Component
{
    // ... properties and other methods ...

    public function deleteUnusedConfirm($coverPath) 
    {
        $filename = basename($coverPath); // Get just the filename for the confirmation message
        $this->confirm(
            "Delete the unused cover file <b><i>{$filename}</i></b>?",
            [
                'heading' => 'Delete Unused Cover',
                'confirmText' => 'Yes, delete it',
                'next' => [
                    'onEvent' => 'delete-unused-confirmed',
                    'path' => $coverPath, // Pass the cover path to the event
                ]
            ]
        );
    }

    #[On('delete-unused-confirmed')] 
    public function deleteUnusedCover($path) // [!code focus:15]
    {
        if (Storage::disk('public')->exists($path)) {
            Storage::disk('public')->delete($path); // Delete the unused file
            $this->toastInfo('Unused cover deleted.', [
                'position' => 'top-right'
            ]);
            // Refresh the list of unused covers to remove the deleted one from the display
            $this->findUnusedCovers();
        } else {
            $this->toastError("File not found. It may have already been deleted.", [
                'position' => 'top-right'
            ]);
        }
    }

    // ... render() method ...
}

As you glide your mouse pointer over an unused cover image, a subtle yet distinct delete button will gracefully materialize, providing an immediate visual cue for action. Unused cover hover

Last updated:

© 2025 - Vince Colson & Patrick Verhaert