Livewire Media Selector

A lightweight, WordPress-style media selector for Laravel applications powered by Livewire.
Full documentation: livewire-media.thejano.com

Screenshots

Video demo

Features

• Browse, search, and paginate media stored on your Laravel disks
• Upload new files (respecting size, extension, and mime limits)
• Single or multiple selection with drag-to-reorder support
• Optional collections to group media per feature (e.g. gallery, avatars)
• Trait helpers (attachMedia, syncMedia, getMediaUrl) for quick model integration
• Soft delete, restore, and optional trash tab when you need moderation
• Emits Livewire/browser events so you can react to uploads, deletes, and selections

UX & i18n updates

• Action buttons are hidden by default and appear on hover (non-interactive when hidden)
• Clear, thicker selection ring with offset for better contrast
• Select File tab is the default when the modal opens
• New can_upload config and :canUpload attribute to disable Upload tab and uploads
• RTL support (auto when locale is Arabic/Kurdish/etc.); key positions flip in RTL
• Translations included (English, Arabic, Kurdish/Sorani) with publishable lang files
• Component inherits your app’s font-family

Installation

Requirements

• PHP >= 8.1
• Laravel 10–12
• Livewire 3.3+ or 4.x

Note: Livewire 3+ requires Laravel 10+. If you need Laravel 9 support, a Livewire v2–compatible variant is required (not included in this package version).

Require the package:

composer require drpshtiwan/livewire-media-selector

Publish the config (optional):

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

Publish the migration and run it:

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

Ensure your public disk is set up and linked:

php artisan storage:link

Publish the views (optional, if you want to customize the markup/classes):

php artisan vendor:publish --tag=media-selector-views

Publish the assets (CSS):

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

Simple usage:

<livewire:media-selector wire:model="media" collection="gallery" />

Read the docs for setup details, configuration options, and integration patterns.

Changelog

See CHANGELOG.md for recent and upcoming changes.

Developer

Developed and maintained by drpshtiwan.

License

MIT License. See LICENSE for details.