Livewire Media Manager

A TALL Stack Media Manager to upload media files to multiple storages or select image from Unsplash, URL

CleanShot.2022-03-22.at.22.24.51.mp4

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

• phucle
• All Contributors

License

The MIT License (MIT). Please see License File for more information.