Laravel livewire Upload ảnh lên server
Demo upload file lên với livewire :
File blade
<div class="offset-3 col-6">
<h1>Image Upload</h1>
@if(session('success'))
<div class="alert alert-success">{{session('success')}}</div>
@endif
@if($image)
<img width="500" height="300" src="{{$image->temporaryUrl()}}"
@endif
<div class="mb-3">
<input type="file" id="upload{{$id}}" wire:model="image" class="form-control">
@error('image')
<span class="text-danger">{{$message}}</span>
@enderror
<input type="date" name="published" id="published" wire:model="published" />
</div>
@if($image)
<button wire:click="resetImage" class="btn btn-secondary">Reset</button>
@endif
<button wire:click="save" class="btn btn-primary">Save</button>
</div>
File Xử lý :
<?php
namespace App\Livewire;
use App\Models\Image;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Storage;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\WithFileUploads;
class Imageupload extends Component
{
use WithFileUploads;
public $image;
public $id = 1;
public function render()
{
return view('livewire.imageupload');
}
function save()
{
$this->validate([
'image' => 'required|mimes:jpeg,png,jpg,gif|max:4048'
]);
$fileNameWithoutExtension = pathinfo($this->image->getClientOriginalName(), PATHINFO_FILENAME);
$new_file = $this->setname_file($fileNameWithoutExtension, $this->image->getClientOriginalExtension());
$status_image = Storage::disk('public')->putFileAs('uploads', $this->image, $new_file);
Image::create(['image' => $status_image]);
$this->dispatch('create_image');
session()->flash('success', 'File Saved');
//$this->redirect(route('image'));
$this->reset();
}
function resetImage()
{
$this->reset('image');
$this->id++;
session()->flash('success', 'Image Reset');
}
protected function setname_file(string $fileName, string $type = 'xlsx'): string
{
$timestamp = Carbon::now()->format('Y_m_d_H_i_s');
return $fileName . '_' . $timestamp . '.' . $type;
}
}