Livewire Media Manager
A TALL Stack Media Manager to upload media files to multiple storages or select image from Unsplash, URL
Installation
You can install the package via composer:
composer require phuclh/media-manager
Add Tailwind CSS classes in tailwind.config.js:
module.exports = {
content: [
...
'./vendor/phuclh/media-manager/resources/views/**/*.blade.php',
]
};
You can publish the config file with:
php artisan vendor:publish --tag="media-manager-config"
This is the contents of the published config file:
return [
'storage' => [
'disk' => 'public'
],
'image' => [
'allowed_file_types' => ['png', 'jpg', 'jpeg', 'gif'],
/*
* Max file size in KB.
*/
'max_file_size' => 5000,
],
'unsplash' => [
'access_key' => env('UNSPLASH_ACCESS_KEY'),
'utm_source' => env('APP_NAME')
]
];
Optionally, you can publish the views using
php artisan vendor:publish --tag="media-manager-views"
How to open Media Manager modal
Via Alpinejs
this.$wire.emitTo(
'media-manager',
'media-manager:show',
{
id: 'featured-image',
file: null,
metadata: null
}
);
From Livewire Component
use Phuclh\MediaManager\WithMediaManager;
...
public function showUploader()
{
$this->showFileManager('featured-image', $file, $metadata);
}
You can pass file URL as 2nd parameter so the Media Manager will show that file by default.
Remove File from Media Manager
use Phuclh\MediaManager\WithMediaManager;
...
public function removeFeaturedImage()
{
$this->image = null;
$this->removeFileFromMediaManager();
}
Events
File Selected
When a media file is selected, it will dispatch an event, called media-manager:file-selected
You can listen on that event by using AlpineJS like this:
x-on:media-manager:file-selected.window="setImage"
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.
22 Nov 4, 2022
8 Oct 10, 2022
3 Aug 15, 2018
13 Dec 29, 2022
570 Dec 27, 2022
1 Feb 10, 2022
6.5k Jan 3, 2023
438 Jan 2, 2023
3.4k Dec 28, 2022
3 Dec 9, 2022
1 Nov 17, 2021
812 Dec 30, 2022
48 Jan 6, 2023
336 Jan 4, 2023
241 Dec 29, 2022
18 Dec 16, 2021
500 Dec 29, 2022
7 Nov 16, 2022