TemporaryUrl() on livewire image uploads 401 response

Livewire version v3.5.19

Laravel version v11.31

Which PHP version are you using? PHP 8.4

What is the problem? I can upload the images fine, but when I use the temporary preview Url, it throws a 401 error.

I looked around online, and everyone keeps saying comment out the validate signature portion from within livewire source files. I dont think that is a viable solution here. I am using the local driver, with serve set to true. Commenting that part out does work though, but it isnt really an option.

Any help regarding this would be immensely appreciated.

Code snippets The Blade Component

@props(['label', 'name', 'marginClass' => '', 'previewUrl' => null])

<label class="{{ $marginClass }} border cursor-pointer flex gap-2 items-start p-4">
    <div class="flex-1">
        @if ($label)
            <p class="block text-xs font-bold">{{ $label }}</p>
        @endif
        <p class="text-xs italic mt-1">
            Click to select an image to upload.
        </p>
        <input type="file" class="hidden" {{ $attributes }} />
        @error($name)
            <span class="text-red-500 text-xs mt-2">{{ $message }}</span>
        @enderror
    </div>
    @if ($previewUrl)
        <div>
            <img src="{{ $previewUrl }}" alt="Preview" class="w-24 h-24 object-cover" />
        </div>
    @endif
</label>

The use of temporaryUrl

<div>
    <div class="flex gap-4 items-start mt-4">
        <div class="w-full max-w-4xl">
            <x-ui.card>
                <x-slot:title>Top Section</x-slot:title>
                <x-slot:description>This is the section at the very top of the about us page</x-slot:description>
                <x-input.text label="Title" margin-class="mt-4" placeholder="Eg: Company Overview"
                    name="content.top_section.title" wire:model="content.top_section.title" />
                <x-input.richtext class="mt-4" label="Description" wire:model="content.top_section.content" />
                <x-input.image margin-class="mt-4" label="Section Image" name="content.top_section.image"
                    wire:model="content.top_section.image"
                    preview-url="{{ $content['top_section']['image']?->temporaryUrl() }}" />
            </x-ui.card>
        </div>
        <x-ui.card class="max-w-sm w-full">
            <x-slot:title>Save Page</x-slot:title>
            <x-slot:description>Save the changes made to the about us page</x-slot:description>
            <x-ui.flash class="mt-4" />
            <x-input.button class="mt-4" wire:click="save">
                Save
            </x-input.button>
        </x-ui.card>
    </div>
</div>

RemiM

1 year ago

Level 16

Livewire Uploads Are Using Private Storage (`local` Disk)

By default, Livewire stores uploaded files in the local disk, which is not publicly accessible. This means that temporary URLs generated for these files will be protected, often resulting in a 401 Unauthorized error.

If your files don’t need to be private, consider storing them in the public disk to make them easily accessible. More details here: https://laravel.com/docs/11.x/filesystem#file-visibility.

hussainabeer

1 year ago

Level 1

@RemiM Hi, yes ... But the 401 goes away when I comment out the signature verification from within the livewire source files. I found the issue to be that the ”&” in the url gets transformed into a & when outputting it in blade... So what I did was {!! $previewUrl !!} ...

1 like

satyakresna

3 months ago

Level 4

Hey! Thank you! It works! I double check the URL format and yeah I see the & instead of &

Please or to participate in this conversation.

TemporaryUrl() on livewire image uploads 401 response

Livewire Uploads Are Using Private Storage (local Disk)

Livewire Uploads Are Using Private Storage (`local` Disk)