Refresh component after uploading a file

#1

I have a simple component that renders images and has the option to upload new ones.
After It finishes $this->images (Model) is refreshed correctly but the component doesn’t re-render the images.

Any ideas how to trigger a refresh?

#2

I’m not sure what your code looks like but what’s likely happening is that you’re rendering out an <img src="filename.jpg"> to display the image. Since that isn’t likely to change on component refresh, the DOM diffing will skip over it. You can add some randomness to the img to force livewire to swap it out and refresh. Not sure if this is the best way to accomplish it as you haven’t provided any code to help troubleshoot the issue but this will likely fix your problem:

<img src="filename.jpg?{{ rand() }}">

What this does is append a random number to the query string of your URL. The query string will be ignored but the point is that it’s different and needs to be swapped out by livewire.

#3

you are right, I should had provided a code snippet. This part doesn’t refresh

@foreach ($images as $image)
     <img src="{{ $image->thumbnail) }}">
@endforeach

Where $images is a collection of models. The collection is refreshed properly because I see the correct count, it’s just not rendering it again.

#4

Are you trying to refresh the thumbnails after you’ve saved them to your storage container or are you trying to show previews as you’re uploading then images? If it’s the latter, this works for me:

@foreach ($images as $image)
    <img src="{{ $image->temporaryUrl() }}">
@endforeach

I don’t need to add anything else to get the previews to display properly. It might be different after save so let me know if that’s what you’re trying to accomplish.

#5

after I store it. I expect the new one added to appear in the list because the collection of models ($images) is refreshed. But that specific loop is not rendered again. Preview works fine (super cool functionality)

#6

Is thumbnail() a custom method you’re using? To my knowledge, there’s no thumbnail() method on the file upload.

#7

yes, it composes the full url. That works fine, if I refresh the page everything works fine

#8

Okay, so it’s back to forcing livewire to swap out the element in the DOM, then. There’s no native way to do this that I’m aware of but appending a random number should force the behavior.

Have you tried:

@foreach ($images as $image)
     <img src="{{ $image->thumbnail() }}?{{ rand() }}">
@endforeach
#9

Also, it may be how you’re passing $images down to your component. If you’re trying to pass models between components, it may not work as data types need to be javascript readable.

#10

collection of models, there’s no issue with it since it works on page refresh. I’ll keep experimenting till I find the issue :slight_smile:

#11

Any news on this issue?

I have a similar problem now, i have a products page and what i need is the following:

  • add to cart button if you are not logged in displays a modal
  • i create a method login and wire:submit a form in the modal
  • where the user loges in, the products are not re rendered

The question is how to make the mount() method re rendee the whole component from a login method .

I think the same is required here (the original images object that is rendered with blade by the component has to be re rendered (because you uploaded a new image)

#12

@simonovski,

You may look into hooking into a different part of your component’s lifecycle, probably updated():

From there, you could $emit an event that your original component is listening for and call a refresh of the content there. You may not even have to put anything in your listener’s code to trigger the refresh: