README

A powerful, standalone, and customizable Media Manager for Laravel applications. This package provides a seamless way to manage uploads, browse media, and select files via a beautiful AJAX-powered interface.

Features

🚀 Asynchronous Uploads: Drag-and-drop or select files for instant upload with progress bars.
🖼️ Media Picker Component: Easy-to-use Blade component for single or multiple file selection.
🎨 Standalone CSS/JS: Works even without Tailwind CSS; assets are minified and easy to publish.
⚙️ Highly Configurable: Customize upload paths, image optimization, and caching.
📝 CKEditor Integration: Built-in support for image uploads from rich text editors.
🗑️ Soft Deletes: Built-in trash management for media files.
🔗 Unique Slugs: Automatic collision detection and unique slug generation.
☁️ WebP Conversion: Optional automatic conversion of images to WebP for optimization.
⚡ Media Caching: Built-in support for browser-side media caching.

Installation

Then register the service provider in bootstrap/providers.php:

return [
    App\Providers\AppServiceProvider::class,
    Tasmir\MediaManager\MediaManagerServiceProvider::class, // Add this
];

Run the migrations:

php artisan migrate

Configuration

Publish the configuration file:

php artisan vendor:publish --tag=media-manager-config

The config file (config/media-manager.php) allows you to customize:

assets: Paths to CSS/JS files.
upload_path: Where files are stored (default: media).
active_tailwindcss: Set to false to load the standalone CSS file.
enable_webp_convert: Toggle WebP conversion (default: true).
image_quality: Default quality for image encoding (default: 80).
media_cache: Array containing enable (bool) and expiry (int).
max_file_size: Maximum upload size in MB (default: 5).
button_class & button_text: Default styling for the picker button.

Assets Management

Publish the CSS and JS assets:

php artisan vendor:publish --tag=media-manager-assets

Include the scripts in your main layout (usually before </body>):

@include('media-manager::partials.manager-scripts')

Usage

Blade Component

The easiest way to use the media manager is via the <x-media-picker /> component.

Single Selection (Returns ID):

<x-media-picker name="banner_id" label="Banner" :value="$hall->banner_id" />

Multiple Selection (Returns JSON Array of IDs):

<x-media-picker name="gallery" label="Gallery" :value="$hall->gallery" type="multiple" returnType="array"/>

Multiple Selection (Returns Comma-Separated String of IDs):

<x-media-picker name="gallery" label="Gallery" :value="$hall->gallery" type="multiple" returnType="string"/>

Custom Design:

<x-media-picker 
    name="avatar" 
    button-text="Change Avatar" 
    button-class="btn btn-primary" 
/>

Manual Trigger (JavaScript)

You can trigger the media manager manually from any element:

MediaManager.open({
    type: 'single', // 'single' or 'multiple'
    targetInput: 'my-input-id',
    targetPreview: 'my-preview-container-id',
    onSelect: function(value, items) {
        console.log('Selected value:', value);
        console.log('Selected items:', items);
    }
});

CKEditor Integration

The package includes a route for CKEditor image uploads. Set your CKEditor uploadUrl to: {{ route('ck.image.upload') }}

License

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

tasmir / media-manager

Maintainers

Details