Image Preview in x-file not working

[willcastillo]

maryUI version

^1.26

daisyUI version

^4.9.0

Livewire version

3.4.9

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

Hello,

I'm trying to use the preview feature for the x-file component as mentioned here but it's not working. I'm sure the image url is valid, it works everywhere else except inside the x-file component. Image attached, I'm doing this (added a second img tag to show it works outside of the component):

        <x-file wire:model="file" accept="image/png, image/jpeg">
            <img src="{{ $this->photo }}" class="h-40 rounded-lg"/>
        </x-file>
        <img src="{{ $this->photo }}" />

FWIW, I'm using Volt.

Is this a bug or another instance of a PICNIC? Been using Laravel/Livewire/Volt/MaryUI for a couple of weeks now.

[robsontenorio]

What means PICNIC?

Any errors on console?

[willcastillo]

No errors in console...

Sorry about the PICNIC thing... That's "Problem in Chair, Not In Computer"... in other words, totally possible I messed up things.

[robsontenorio]

Try {{ $photo }} , because blade template variables works like that.

[willcastillo]

For a second I thought it was indeed a PICNIC and got excited... but using $photo made no difference unfortunately :(

I found some interesting tidbits though: First, just using $photo made the generated IMG element to look like <img src class=[...].

More interesting, I added this code:

        @php
            \Log::info("Before: $photo");
        @endphp
        <x-file wire:model="file" accept="image/png, image/jpeg">
            <img src="{{ $photo }}" />
            @php
                \Log::info("Inside: $photo");
            @endphp
        </x-file>
        @php
            \Log::info("After: $photo");
        @endphp

... and realized that the x-file component got rendered two times. The first time it has the correct values but the second time it runs, the values are blank. My log looks like this:

[2024-04-05 13:41:01] local.INFO: Before: http://[irrelevant]ef.jpg  
[2024-04-05 13:41:01] local.INFO: Inside: http://[irrelevant]ef.jpg  
[2024-04-05 13:41:01] local.INFO: After: http://[irrelevantef.jpg  
[2024-04-05 13:41:01] local.INFO: Before:   
[2024-04-05 13:41:01] local.INFO: Inside:   
[2024-04-05 13:41:01] local.INFO: After:  

Now... if I remove the x-file component, the log looks like this:

[2024-04-05 13:41:01] local.INFO: Before: http://[irrelevant]ef.jpg  
[2024-04-05 13:41:01] local.INFO: After: http://[irrelevantef.jpg  

I hope that helps!

[robsontenorio]

Take a look at Bootcamp, there is the full example on how to use x-file with image preview. Maybe you have some misleading code somewhere.

https://mary-ui.com/bootcamp/04

[willcastillo]

Thank you for your hard work on Mary-UI and for your time trying to help me, really appreciate it...

I think I followed the bootcamp to the letter and still couldn't make it work. I noticed I forgot to mention a very important detail of my use case: I am trying to "edit" /replace the previous image... so my problem is really about how to bind a url in a database to the livewire "photo" property.

Not sure if this is the right way but I ended up creating a different property, type string, to hold the url of for existing records... and using this variable on the edit template. Like this:

        @if ($current_photo)
            <x-file wire:model="photo" accept="image/png, image/jpeg">
                <img src="{{ $current_photo }}" class="h-40 rounded-lg" />
            </x-file>
        @endif

And now it works. I have no idea if this is the right approach or a best practice... but it works for now.

[robsontenorio]

The Bootcamp shows the edit user part. And it uses “$user->avatar” (image url stored on database) to show the current image. But you can also use any extra property as you did.