Download the PHP package zeroar/withfile without Composer
On this page you can find all versions of the php package zeroar/withfile. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download zeroar/withfile
More information about zeroar/withfile
Files in zeroar/withfile
Package withfile
Short Description A File extensions for Laravel Livewire.
License MIT
Informations about the package withfile
Livewire Uploading File
Introduction
Do you have a problem for uploading file in livewire component? If yes, same with me.
If you use input with type file and implement wire:model
, is that work for you to upload file? thats not work for now. Why this is happen? because livewire is send json data, not form data. I don't know this problem will gone in livewire future version. I research the solution for this problem and i found the solution for now. With this extensions, i hope this extensions will answer the problem.
Installation
Install this using composer.
After you install, update your layouts and add @withfileScripts
after @livewireScripts
.
Implementation Component
Now you can add this extension in your livewire component. To implement this, see the example below:
$fileable
This property is required. If you not implement this, your upload file will not working. So please implement this to your component.
updatedFoo($value, $old_value)
Updated method is same with livewire lifecycle hooks. But in livewire just only have one $value, in this i have add the $old_value.
Implementation in view
In your blade file, you can implement looks like example below:
Or if you want to resize your image before send the file, below is example for this:
Or if you want to resize both of width and height, below is example for this:
wire:withfile
Use this attribute looks like you use wire:model
, but it's not same with wire:model
. So, all in wire:model
can't implemented to wire:withfile
.
with-resize-if-image
This is will resize your file if you upload an image. Before file image send to your component, image will resized.
with-max-both
This will add the maximum of width and height. In example, if height greater than width then the height will be set to maximum and width will automatically resized.
with-max-width, with-max-height
Use this if you wan't to resize just height or width for the maximum of image width or height.