Download the PHP package anil/file-picker without Composer

File Picker

A powerful media library and file picker component for Laravel Livewire. Supports images, videos, audio, documents, and every other file type, all behind a polished modal interface.

Features

• 📁 All file types — images, videos, audio, documents, spreadsheets, presentations, archives, code
• 🎨 Clean, themeable UI — fully recolorable through config, with a responsive sheet-style detail panel on tablet/mobile
• 🔍 Search & filter — by file type, folder, tag, or favorite
• 📤 Drag & drop + paste — drop files in, or paste straight from the clipboard
• 🚨 Upload error reporting — per-file validation messages, browser-side failures (413/network) surface in the same toast
• ✅ Single / multiple selection — with a configurable max_files
• 🗑️ Trash & restore — soft-delete with retention-based pruning
• 🔁 Replace file — swap the file behind a media row without changing its ID
• 🪪 Hash & duplicate detection — SHA-256 dedup with reuse, reject, or allow strategies
• ⭐ Favorites, 🏷️ tags, 📂 folders — organize without inventing your own taxonomy
• ✏️ Inline editing — rename and edit alt text without leaving the picker
• 👤 Ownership tracking — auto-record user_id, optionally scope per user
• 📊 Storage quotas — global and per-user
• 📈 Statistics API — counts, sizes, by-type via FilePicker::getStats()
• 📥 Downloads — single files or bulk ZIP
• 🛠️ Console commands — file-picker:prune-trash, file-picker:prune-orphans, file-picker:stats
• 🎯 Form integration — Livewire components and traditional HTML forms
• ♿ Accessible — keyboard nav, focus management, Esc to close

Requirements

• PHP 8.2+
• Laravel 11.x, 12.x, or 13.x
• Livewire 3.x or 4.x
• plank/laravel-mediable ^6.0 — installed automatically

Installation

file-picker:install publishes config/file-picker.php and runs an additive migration that adds the columns the package needs (folder, tags, is_favorite, hash, width, height, duration, user_id, download_count, custom_properties, deleted_at) to Plank's existing media table. CSS/JS are served via a built-in route — nothing to publish, nothing to compile.

Install command flags

Add stack slots to your layout

The component pushes CSS to @stack('head') and JS to @stack('scripts'):

Quick Start

Usage

In a Livewire component

In a traditional HTML form

With a JavaScript callback

Component Properties

Allowed File Types

Restrict the picker via allowedTypes:

Extensions per type can be customised in config/file-picker.php under extensions.

Events

JavaScript event

Fired on window after the user confirms a selection:

Each item in selected is an object with id, url, filename, size, extension, file_type, alt, created_at.

Livewire events

Two events fire whenever the selection changes — pick the one that fits your handler shape:

filesSelected — named arguments, easiest for typed signatures:

file-picker-selected — single array payload with the full picker context:

If you have several pickers on one page, switch on $inputName to route the selection to the right property.

Upload Errors

Upload problems are surfaced to the UI at three levels:

1. Server-side validation (size, mime type) — failures render as a toast plus a per-file list ({filename}: {message}).
2. Per-file driver failures — DuplicateMediaException, StorageQuotaExceededException, UploadFailedException, or any other Throwable thrown by the driver are aggregated into the toast (e.g. "2 uploaded, 1 failed").
3. Browser-side failures — the bundled JS listens for livewire-upload-error and forwards the HTTP status:
   • 413 → "the file is larger than the server allows"
   • 422 → "the file did not pass validation"
   • other status codes → generic "Upload failed (HTTP …)"

Error toasts are sticky — dismiss with the × button or any new upload action.

To push your own error into the toast (e.g. from a custom driver):

Tablet & Mobile

The library tab uses a side-by-side layout on desktop (≥1025px) with the Attachment Details panel always visible. On tablet/mobile (≤1024px), the panel becomes a right-side sheet that's closed by default — tapping a thumbnail just selects it.

To open the details sheet on touch devices, tap the edit icon that sits next to the selection checkbox on each item. It promotes the item to the active selection (without toggling existing selections off) and slides the sheet in. The icon is hidden on desktop where the sidebar is always inline. Rename it via the texts.view_details config key (or the published lang file).

Drivers

Plank driver (default)

Built on top of plank/laravel-mediable — installed automatically. The bundled FilePickerMedia model extends Plank's Media and the install migration adds the extra columns to Plank's existing media table.

Using a non-public disk? Plank's mediable.allowed_disks config defaults to ['public']. Publish Plank's config (php artisan vendor:publish --tag=mediable-config) and add your disk to allowed_disks.

Custom driver

Implement Anil\LivewireFilePicker\Contracts\MediaDriverInterface (or extend Anil\LivewireFilePicker\Drivers\AbstractDriver) and register the FQCN:

Authorization

Default is "everything allowed." For real apps, plug in an authorization class:

Custom Filters

Add filter controls to the library toolbar in two parts:

1. UI controls in config:

2. The filter class:

Configuration

Publish the config to customise everything:

Key sections:

Text strings

All UI text is configurable. Publish lang files to translate:

Customising Views

Publish blade views to override the UI:

Views are published to resources/views/vendor/file-picker/.

API Reference

Component methods

Facade

Console commands

Download routes

Computed properties

License

The MIT License (MIT). See License File.