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">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row mb-3">
<div class="col-md-6">
<div>
<input type="file" wire:model="file">
@error('file') <div class="error block">{{ $message }}</div> @enderror
<div wire:loading wire:target="file">{{ __('Uploading...') }}</div>
</div>
<div>
<button class="btn btn-sm btn-flat btn-primary block mt-1" wire:click.prevent="save()">{{ __('Upload') }}</button>
</div>
</div>
<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>
</div>
</div>
</div>
<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>
@endforeach
@endif
</div>
</div>
<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>
<hr>
<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>
</div>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Livewire component
<?php
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 = [
'loadMore',
'deleteImage',
];
public $search = '';
public $file = null;
public function save()
{
$this->validate([
'file' => 'image|max:2048',
]);
$path = pathinfo($this->file->getClientOriginalName());
$name = $path['filename'] . time();
$filename = $name . '.' . $path['extension'];
Media::create([
'name' => $name,
'file_name' => $filename,
'mime_type' => $this->file->getClientOriginalExtension(),
'size' => $this->file->getSize()
]);
Image::make($this->file)
->save(public_path('uploads/images/'. $filename));
Image::make($this->file)
->fit(200, 200, fn($constraint) => $constraint->upsize())
->save(public_path('uploads/images/thumbs/'. $filename));
$this->reset('file');
}
public function deleteImage($id)
{
$image = Media::find($id);
$image->delete();
File::delete([
public_path('uploads/images/'. $image->file_name),
public_path('uploads/images/thumbs/'. $image->file_name)
]);
$this->resetPage();
}
public function loadMore()
{
$this->perPage = $this->perPage + 8;
}
public function updatingSearch()
{
$this->resetPage();
}
public function render()
{
$files = Media::where('name', 'like', '%'.$this->search.'%')
->latest()
->paginate($this->perPage);
return view('livewire.file-manager', [
'files' => $files
]);
}
}
and this is my view blade
<livewire:file-manager />
<script>
let ele = document.querySelector('.file-manager-items')
ele.onscroll = () => {
if (ele.offsetHeight + ele.scrollTop > ele.offsetHeight) {
Livewire.emit('loadMore');
}
}
function manager() {
return {
id: '',
name: false,
show: false,
src: false,
selected: false,
toggleImage(id, name, src) {
console.log(name);
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;
}
},
}
}
</script>
