[Solution] Page Previews with SpatieMediaLibraryFileUpload

[pboivin]

When using SpatieMediaLibraryFileUpload, the preview doesn't have access to the uploaded file until the form is saved. As a workaround, you can check for the presence of a TemporaryUploadedFile and pass its temporary URL to your preview:

Form Field

    SpatieMediaLibraryFileUpload::make('featured_image')
        ->collection('featured'),

Create or Edit Page Class

    protected function mutatePreviewModalData(array $data): array
    {
        // Get the live value from the page data
        $featuredImage = collect($this->data['featured_image'])->first();

        if ($featuredImage instanceof TemporaryUploadedFile) {
            $data['featuredImagePreviewUrl'] = $featuredImage->temporaryUrl();
        }

        return $data;
    }

Blade View

    @if ($featuredImagePreviewUrl ?? false)
        <img src="{{ $featuredImagePreviewUrl }}" alt="">
    @elseif ($featuredImage = $page->getFirstMedia('featured'))
        <img src="{{ $featuredImage->getUrl() }}" alt="">
    @endif