sherwinchia / livewire-image-uploader
Livewire upload image component.
Requires
- php: ^7.4|^8.0
- illuminate/support: ^8.0
- livewire/livewire: ^2.4
Requires (Dev)
- orchestra/testbench: ^6.0
- phpunit/phpunit: ^9.0
This package is auto-updated.
Last update: 2024-04-29 04:53:35 UTC
README
Demo
Features
- Upload image
- Upload multiple images
- Remove image
Requirements
- Laravel Livewire 2.0
Installation
You can install the package via composer:
composer require sherwinchia/livewire-image-uploader
Usage
Add the Livewire directive into component blade page (E.g form-component.blade.php).
<livewire:image-uploader name="foo"> or <livewire:image-uploader name="foo" size="2048" multiple>
Props | Type | Required | Description |
---|---|---|---|
name | string | ✅ | Parent component public properties to store uploaded images name. |
multiple | bool | ❌ | Enable multiple upload. (Default: false) |
size | int | ❌ | Image size limit. (Default: 1024KB) |
Add public properties to store the name of the images uploaded in array and use the ImageUploader trait in the component code (E.g FormComponent.php).
<?php namespace App\Http\Livewire; . . use Sherwinchia\LivewireImageUploader\Http\Traits\ImageUploader; class FormComponent extends Component{ use ImageUploader; public $foo; }
Every time there are changes on the images (remove/upload), the component will trigger an event which trigger method in the parent component. The method will update the $foo properties with an array of new images name.
Uploaded File
For now all uploaded images will be stored inside storage/public/image-uploader. To access the image from the frontend you need to create a symbolic link from public/storage to storage/app/public. To create the symbolic link run:
php artisan storage:link
To display the image in frontend:
<img src="{{ asset('storage/image-uploader/' . $imageName) }}">
Styling
To add the styling, you need publish the package assets folder to your project public folder. To publish the package assets folder run:
php artisan vendor:publish --provider="Sherwinchia\LivewireImageUploader\LivewireImageUploaderServiceProvider" --tag="assets"
Next, include the css file inside the assets folder in your HTML page section:
<head> ... <link href="{{ asset('image-uploader/css/app.css') }}" rel="stylesheet"> </head>