zeroar / withfile
A File extensions for Laravel Livewire.
Requires
- php: ^7.1.3
- livewire/livewire: ^1.0
Requires (Dev)
- laravel/framework: ~5.6.0|~5.7.0|~5.8.0|^6.0|^7.0
This package is auto-updated.
Last update: 2024-12-04 11:57:00 UTC
README
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.
composer require zeroar/withfile
After you install, update your layouts and add @withfileScripts
after @livewireScripts
.
... @livewireScripts @withfileScripts </body> </html>
Implementation Component
Now you can add this extension in your livewire component. To implement this, see the example below:
namespace App\Http\Livewire; use Illuminate\Support\Facades\Storage; use Livewire\Component; use Withfile\WithFile; // add this to implement class UploadPhoto extends Component { use WithFile; // add this to implement // this is target variable // this variable will turn to array after upload file public $photo; // please implement this variable and add the variable target // if you not implement this, WithFile will not working public $fileable = [ 'photo' ]; public function render() { return view('livewire.upload-photo'); } // implement this method to edit or save the file public function updatedPhoto($value, $old_value) { // in this area, you can implement what you want for the file. // to save the file, i recommend to try this for save file in local $filename = $value['name']; // below for customize filename // $filename = "custom-file-name" . $value['extension']; Storage::disk('public')->put($filename, $this->raw($value)); $this->photo = Storage::url($filename); // get the file url for saving to your database } }
$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:
<div> @isset($photo) <img src="{{ $photo }}"> @endisset Upload Photo <input type="file" wire:withfile="photo"> </div>
Or if you want to resize your image before send the file, below is example for this:
<div> @isset($photo) <img src="{{ $photo }}"> @endisset Upload Photo <input type="file" wire:withfile="photo" with-resize-if-image with-max-width="1080" with-max-height="1080"> </div>
Or if you want to resize both of width and height, below is example for this:
<div> @isset($photo) <img src="{{ $photo }}"> @endisset Upload Photo <input type="file" wire:withfile="photo" with-resize-if-image with-max-both="1080"> </div>
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.