Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhonoryza/laravel-fileupload-component
laravel fileupload livewire component
https://github.com/jhonoryza/laravel-fileupload-component
Last synced: about 2 months ago
JSON representation
laravel fileupload livewire component
- Host: GitHub
- URL: https://github.com/jhonoryza/laravel-fileupload-component
- Owner: jhonoryza
- License: mit
- Created: 2024-01-24T19:32:25.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-01T18:10:42.000Z (11 months ago)
- Last Synced: 2024-09-06T07:58:10.576Z (4 months ago)
- Language: PHP
- Homepage:
- Size: 52.7 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel File Upload Component
laravel livewire file upload component
## Requirement
- php v8.2
- laravel v10
- livewire v3
- spatie/media-library v10
## Installation
```bash
composer install jhonoryza/laravel-fileupload-component
```
```bash
php artisan vendor:publish --provider=Jhonoryza\Component\FileUpload\FileUploadServiceProvider
```
## Quick Start
prepare model, example Setting model
```php
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Jhonoryza\Component\FileUpload\Traits\InteractsWithFileUpload;
class Setting extends Model implements HasMedia
{
use InteractsWithMedia;
use InteractsWithFileUpload;
public function registerMediaCollections() : void
{
$this->addMediaCollection('settings');
}
}
```
prepare livewire form class
```php
/**
* property to store multiple images
*/
public $images = [];
/**
* listener when there is onFileReplace event from the component
*/
#[On('images:onFileReplace')]
public function replaceImages(array $images): void
{
$this->images = $images;
}
/**
* listener when there is onFileAdded event from the component
*/
#[On('images:onFileAdded')]
public function addToImages(array $file): void
{
$this->images[$file['uuid']] = $file;
}
/**
* form save function example, setting is a Model
* we call syncFileUploadRequest function
* to save images to media library
*/
public function save()
{
$this->setting
->syncFileUploadRequest($this->images)
->toMediaCollection('settings');
}
```
in create or edit livewire component
```php
```
in view livewire component
```php
```
## Property Explanation
- name is required and will affect what the event name is
- :model you need to pass a variable with Model type that implement HasMedia
- collection is for media collection name
- :multiple for single file upload or multiple file upload
- :canUploadFile to hide file selector
## Component Event
this component dispatch 2 event when temporary upload is started
- media:temporary-upload-started
- media:temporary-upload-finished
change `media` with the `name` property, example `name` property is images
```php
Update Setting
```
or you can listen to default livewire file upload event like this
```php
Update Setting
```
another 2 event when the file is removed / loaded or added
- media:onFileReplace
- media:onFileAdded
change `media` with the `name` property, example `name` property is images
```php
#[On('images:onFileReplace')]
public function replaceImages(array $images): void
{
$this->images = $images;
}
#[On('images:onFileAdded')]
public function addToImages(array $file): void
{
$this->images[$file['uuid']] = $file;
}
```
## next thing todo
- [ ] test validation with error message
- [ ] add unit test
- [x] bug when interacts with session flash after redirect (session flash data is missing)
## Security
If you've found a bug regarding security please mail [[email protected]](mailto:[email protected]) instead of using the issue tracker.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.