Getting Started

This guide walks you through installing the package, publishing assets, and rendering the Livewire media selector in your application.

Installation

composer require drpshtiwan/laravel-media-selector

Publish the default configuration and migrations if you need to customize them:

php artisan vendor:publish --tag=media-selector-config
php artisan vendor:publish --tag=media-selector-migrations
php artisan migrate

Publish the UI assets (Tailwind build) so the stylesheet directive can serve them:

php artisan vendor:publish --tag=media-selector-assets --force

Add the directive to a shared layout (after @livewireStyles):

<!-- resources/views/layouts/app.blade.php -->
<head>
    <!-- ... -->
    @livewireStyles
    @mediaSelectorStyles
</head>

Attach media to any Eloquent model via the provided trait:

use DrPshtiwan\LivewireMediaSelector\Concerns\HasMediaSelector;

class Post extends Model
{
    use HasMediaSelector;
}

The trait exposes helper methods such as attachMedia, syncMedia, getMedia, getMediaUrls, and getMediaUrl.

<livewire:media-selector
    wire:model="media"
    :multiple="true"
    collection="gallery"
    :can-upload="true"
    :can-delete="false"
/>

Include the packaged styles in your layout (after @livewireStyles):

@livewireStyles
@mediaSelectorStyles

If you publish the CSS to customize it, keep the directive in place (it will point to your published file).

Livewire::test(\DrPshtiwan\LivewireMediaSelector\Livewire\MediaSelector::class)
    ->call('openModal');

When the user confirms their selection, the component updates wire:model with an array of items shaped like:

[
  { "id": 15, "collection": "gallery", "path": "media/gallery/hero.jpg" }
]

You can store the payload or call $post->syncMedia($payload, 'gallery'); to persist the relation.