PHPackages                             okamal/laravel-media-zone - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. okamal/laravel-media-zone

ActiveLibrary[File & Storage](/categories/file-storage)

okamal/laravel-media-zone
=========================

Elegant polymorphic media uploads for Laravel with Inertia.js and zone-based organization

v1.0.0(6mo ago)23MITPHPPHP ^8.1|^8.2|^8.3|^8.4

Since Nov 12Pushed 6mo ago1 watchersCompare

[ Source](https://github.com/OMK93/laravel-media-zone)[ Packagist](https://packagist.org/packages/okamal/laravel-media-zone)[ Docs](https://github.com/OMK93/laravel-media-zone)[ RSS](/packages/okamal-laravel-media-zone/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (7)Versions (2)Used By (0)

🎯 Laravel Media Zone
====================

[](#-laravel-media-zone)

[![Latest Version on Packagist](https://camo.githubusercontent.com/b46508e6f17e3317e0f67c96c059091272cab584efd40a345e06886a4eeac174/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6b616d616c2f6c61726176656c2d6d656469612d7a6f6e652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/okamal/laravel-media-zone)[![Total Downloads](https://camo.githubusercontent.com/ecadf4f2a687ac279f593be0f2d32bbf4d1c5d094d791bd9f6e0d8901bcdd762/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f6b616d616c2f6c61726176656c2d6d656469612d7a6f6e652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/okamal/laravel-media-zone)[![License](https://camo.githubusercontent.com/023833ae849e14dd968e6e7d510d76049685a1cbbf5a3da80fa680aab61afe8d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6b616d616c2f6c61726176656c2d6d656469612d7a6f6e652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/okamal/laravel-media-zone)

**Elegant polymorphic media management for Laravel + Inertia.js**

*Organize uploads by zones. One trait. Beautiful Vue 3 component. Zero hassle.*

[Features](#-features) • [Installation](#-installation) • [Quick Start](#-quick-start) • [Documentation](#-documentation)

---

✨ Features
----------

[](#-features)

- 🎯 **Zone-Based Organization** - Group media by zones (`avatar`, `gallery`, `documents`, etc.)
- 🔗 **Polymorphic Many-to-Many** - Attach media to any model
- 🎨 **Beautiful Vue 3 Component** - Built with Bootstrap 5.3, includes drag & drop, real-time progress, and previews
- ⚡ **Temporary Uploads** - Files stay in temp storage until model is saved
- 🛡️ **Per-Model Validation** - Custom rules and messages for each model and zone
- 📦 **Flexible File Handling** - Single or multiple files per zone
- 🧹 **Auto Cleanup** - Automatic deletion of orphaned files and old temp files
- 🚀 **Laravel 10, 11 & 12** - Full support for all modern Laravel versions
- 📱 **Responsive** - Mobile-friendly upload interface
- ⚙️ **Configurable** - Extensive configuration options

---

📋 Requirements
--------------

[](#-requirements)

PackageVersionPHP^8.1, ^8.2, ^8.3, ^8.4Laravel^10.0, ^11.0, ^12.0Inertia.js^1.0 or ^2.0Vue^3.3, ^3.4, or ^3.5Bootstrap^5.3> **Note:** This package includes a Vue 3 component styled with Bootstrap 5.3. Make sure your project uses Bootstrap 5.3+.

---

🚀 Installation
--------------

[](#-installation)

### Step 1: Install Package

[](#step-1-install-package)

```
composer require okamal/laravel-media-zone
```

### Step 2: Install Vue Dependency

[](#step-2-install-vue-dependency)

```
npm install vue3-uuid
```

> Your project should already have `vue`, `@inertiajs/vue3`, and `axios` installed.

### Step 3: Publish Assets

[](#step-3-publish-assets)

Publish configuration, migrations, and the Vue component:

```
php artisan vendor:publish --provider="OKamal\LaravelMediaZone\LaravelMediaZoneServiceProvider"
```

Or publish individually:

```
# Publish config file
php artisan vendor:publish --tag=media-zone-config

# Publish migrations
php artisan vendor:publish --tag=media-zone-migrations

# Publish Vue component
php artisan vendor:publish --tag=media-zone-components
```

### Step 4: Run Migrations

[](#step-4-run-migrations)

```
php artisan migrate
```

### Step 5: Link Storage

[](#step-5-link-storage)

If you haven't already:

```
php artisan storage:link
```

### Step 6: Configure (Optional)

[](#step-6-configure-optional)

Review and customize `config/media-zone.php` if needed.

---

⚡ Quick Start
-------------

[](#-quick-start)

### 1. Add Trait to Model

[](#1-add-trait-to-model)

```