Old image still showing after delete

I am developing the file manager using livewire and alpinejs. But I stuck in some weird problem. My problem is when I am deleting the image its delete the image, but the deleted image still showing after delete.

I make a simple video what is my problem is.

Livewire component for modal

<div wire:ignore.self class="modal fade" id="file-manager" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl">
    	<div class="modal-content">
      		<div class="modal-header">
        		<h5 class="modal-title" id="staticBackdropLabel">{{ __('File Manager') }}</h5>
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          			<span aria-hidden="true">&times;</span>
      		<div class="modal-body">
      			<div class="container-fluid">
      				<div class="row mb-3">
      					<div class="col-md-6">
      							<input type="file" wire:model="file">

      							@error('file') <div class="error block">{{ $message }}</div> @enderror
      							<div wire:loading wire:target="file">{{ __('Uploading...') }}</div>
  								<button class="btn btn-sm btn-flat btn-primary block mt-1" wire:click.prevent="save()">{{ __('Upload') }}</button>
						<div class="col-md-6">
      						<div class="input-group input-group-sm float-right" style="width: 200px;">
                    			<input type="text" wire:model="search" class="form-control float-right" placeholder="Search">

			                    <div class="input-group-append">
			                    	<button type="submit" class="btn btn-default" wire.click.prevent="updatingSearch()"><i class="fas fa-search"></i></button>
      				<div x-data="manager()">
	      				<div class="row">
	      					<div class="col-md-9 file-manager-items">
	      						<div class="row">
	      							@if ($files->isNotEmpty())
	      								@foreach ($files as $file)
			      							<div class="col-md-3 mb-2">
			      								<img src="{{ asset('uploads/images/thumbs/' . $file->file_name) }}" alt="{{ $file->name }}" class="img-thumbnail" width="200" height="200" x-on:click="toggleImage('{{ $file->id }}', '{{ $file->name }}', '{{ asset('uploads/images/thumbs/' . $file->file_name) }}')" x-bind:class="{'selected' : id === '{{ $file->id }}' }">
	      					<div class="col-md-3 file-manager-thumbnail-details">
	      						<div class="preview">
	      							<img x-show="src" x-bind:src="src">
	      							<i x-show="src === false" class="fa fa-image"></i>
	      						<div x-show="show">
	      							<label for="name" class="d-block mb-0">Name</label>
	      							<span x-text="name" class="d-block"></span>
	      							<label for="url" class="d-block mb-0">Full URL</label>
	      							<input type="text" class="form-control" x-bind:value="src">
	      				<div class="row mt-3">
	      					<div class="col-md-9"></div>
	      					<div class="col-md-3 text-right">
	      						<button class="btn btn-sm btn-flat btn-primary">Insert</button>
	      						<button type="button" x-on:click="deleteImage" class="btn btn-sm btn-flat btn-danger">Delete</button>

Livewire component


namespace App\Http\Livewire;

use App\Models\Media;
use Illuminate\Support\Facades\File;
use Intervention\Image\Facades\Image;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\WithPagination;

class FileManager extends Component
	use WithFileUploads;

	use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $perPage = 8;

    protected $listeners = [

    public $search = '';

    public $file = null;

	public function save()
			'file' => 'image|max:2048',

		$path = pathinfo($this->file->getClientOriginalName());

		$name = $path['filename'] . time();

		$filename = $name . '.' . $path['extension'];

            'name' => $name,
            'file_name' => $filename,
            'mime_type' => $this->file->getClientOriginalExtension(),
            'size' => $this->file->getSize()

			->save(public_path('uploads/images/'. $filename));

			->fit(200, 200, fn($constraint) => $constraint->upsize())
			->save(public_path('uploads/images/thumbs/'. $filename));


	public function deleteImage($id)
		$image = Media::find($id);


			public_path('uploads/images/'. $image->file_name),
			public_path('uploads/images/thumbs/'. $image->file_name)


	public function loadMore()
		$this->perPage = $this->perPage + 8;

	public function updatingSearch()

    public function render()
    	$files = Media::where('name', 'like', '%'.$this->search.'%')

        return view('livewire.file-manager', [
        	'files' => $files

and this is my view blade

<livewire:file-manager />
 let ele = document.querySelector('.file-manager-items')

        ele.onscroll = () => {
          if (ele.offsetHeight + ele.scrollTop > ele.offsetHeight) {

    function manager() {
      return {
        id: '',
        name: false,
        show: false,
        src: false,
        selected: false,
        toggleImage(id, name, src) {
          this.id = id;
          this.name = name;
          this.src = src;
          this.show = true;
        deleteImage() {
          if (this.id) {
            Livewire.emit('deleteImage', this.id);
            this.id = '';
            this.name = false;
            this.src = false;
            this.show = false;

Hey, @shankhadevpadam
can you share deleteImage Method?

I have already added the file above. Plz look component file in 2nd one.

You have emitted an event called deleteImage and I don’t see any method called deleteImage() inside your component.

Plz check my above code properly. I call deleteImage function using alpinejs.

What about when you’re refreshing the page? The image is still exists or it despairs

Look at this solution, it may help you

1 Like

Thanks now work like a charm.

You are very welcome mate :slight_smile: