File handling is very hard to handle, specially if you are using javascript to send file and then handling on laravel/php side.
With new Laravel Livewire v1.2.0, there is a new way to upload file with zero configuration (Yes no config needed)
Check this video for extensive explaination of every bit of new file upload.
Before moving forward, I can tell you that this is soo easy that you may thing there is some magic behind it, but not its super simple.
Note: If you are new to laravel livewire, check this full livewire course link at the bottom of this post.
First, add the WithFileUploads trait to your component.
use Livewire\Component; use Livewire\WithFileUploads; class UploadPhoto extends Component { use WithFileUploads; public $photo; public function save() { $this->validate([ 'photo' => 'image|max:1024', // 1MB Max ]); $this->photo->store('photos'); } }
then just use wire:click on your input field to handle any file upload.
<form wire:submit.prevent="save"> <input type="file" wire:model="photo"> @error('photo') <span class="error">{{ $message }}</span> @enderror <button type="submit">Save Photo</button> </form>
That's it.
I told you, it is super simple.
Livewire full video course
For more information and awesome tutorials, follow me at https://twitter.com/sarthaksavvy
watch tutorials on https://youtube.com/bitfumes
Top comments (1)
Sir can you tell me how can I perform autoload image without form or submit button? How can I perform onload event in livewire...?