Download the PHP package okamal/laravel-media-zone without Composer
On this page you can find all versions of the php package okamal/laravel-media-zone. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download okamal/laravel-media-zone
More information about okamal/laravel-media-zone
Files in okamal/laravel-media-zone
Package laravel-media-zone
Short Description Elegant polymorphic media uploads for Laravel with Inertia.js and zone-based organization
License MIT
Homepage https://github.com/OMK93/laravel-media-zone
Informations about the package laravel-media-zone
โจ 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
| Package | Version |
|---|---|
| PHP | ^8.1, ^8.2, ^8.3, ^8.4 |
| Laravel | ^10.0, ^11.0, ^12.0 |
| Inertia.js | ^1.0 or ^2.0 |
| Vue | ^3.3, ^3.4, or ^3.5 |
| Bootstrap | ^5.3 |
Note: This package includes a Vue 3 component styled with Bootstrap 5.3. Make sure your project uses Bootstrap 5.3+.
๐ Installation
Step 1: Install Package
Step 2: Install Vue Dependency
Your project should already have
vue,@inertiajs/vue3, andaxiosinstalled.
Step 3: Publish Assets
Publish configuration, migrations, and the Vue component:
Or publish individually:
Step 4: Run Migrations
Step 5: Link Storage
If you haven't already:
Step 6: Configure (Optional)
Review and customize config/media-zone.php if needed.
โก Quick Start
1. Add Trait to Model
2. Use the Vue Component
The component is published to resources/js/Components/MediaZone/MediaZoneUpload.vue.
3. Save in Controller
4. Display Media
Add accessors to your model for easy access:
Display in your views:
That's it! ๐
๐ Documentation
Configuration
The configuration file is located at config/media-zone.php:
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label |
String | '' |
No | Label text above the file input |
model |
String | - | Yes | Full model class name (e.g., App\Models\Post) |
zone |
String | - | Yes | Zone identifier (e.g., avatar, gallery) |
multiple |
Boolean | false |
No | Allow multiple file uploads |
maxFiles |
Number | null |
No | Maximum number of files (only for multiple uploads) |
accept |
String | '*' |
No | File type filter (e.g., image/*, .pdf) |
inputError |
String | '' |
No | Validation error message |
helperText |
String | '' |
No | Helper text below the input |
uploadRoute |
String | null |
No | Custom upload endpoint |
deleteRoute |
String | null |
No | Custom delete endpoint (use :id placeholder) |
Example:
Trait Methods
Get Media
Sync & Attach
Check & Delete
Storage Paths
Media Model Attributes
Per-Model Validation
Create custom validation rules for specific models and zones.
Step 1: Create Config Class
Step 2: Register in Config
Now all uploads for Post model will use these custom rules! ๐
Maintenance Commands
Cleanup Temporary Files
Files uploaded but not attached to any model are automatically cleaned up:
Schedule Automatic Cleanup:
Add to app/Console/Kernel.php:
๐ก Usage Examples
Example 1: User Profile
Example 2: Product Gallery
Example 3: Document Uploads
๐จ Styling
The Vue component is styled with Bootstrap 5.3 classes. Make sure your project includes Bootstrap 5.3+.
Using Bootstrap
If you're using Bootstrap via npm:
Custom Styling
The component uses slots, so you can customize the markup:
๐ง Advanced Usage
Custom Routes
Disable package routes and define your own:
Eager Loading
Prevent N+1 queries:
Custom Storage Paths
Override the storage path method in your model:
โ FAQ
Q: Do I need Bootstrap?
A: Yes, the Vue component uses Bootstrap 5.3 classes. A Tailwind version may be added in the future.
Q: Can I use this with React or Svelte?
A: Currently, only Vue 3 is supported. React/Svelte components may be added in future versions.
Q: Does this work with Laravel Livewire?
A: No, this package is specifically designed for Inertia.js.
Q: Can media be shared across multiple models?
A: Yes! The package uses a many-to-many polymorphic relationship, so the same media can be attached to multiple models.
๐ Changelog
See CHANGELOG.md for recent changes.
๐ค Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
๐ Security
If you discover a security vulnerability, please email [email protected]. All security vulnerabilities will be promptly addressed.
๐ License
The MIT License (MIT). See LICENSE for details.
๐ Support
If this package saves you time:
- โญ Star this repo on GitHub
- ๐ Report bugs via Issues
- ๐ก Request features via Issues
- ๐ฌ Share it with other Laravel developers
๐ Credits
- Omar Kamal - Creator & Maintainer
- All Contributors - View Contributors
Inspired by the needs of the Laravel + Inertia.js community and the excellent work of packages like Spatie's Media Library.
๐ฌ Connect
- ๐ผ LinkedIn: Omar Kamal
- ๐ง Email: [email protected]
- ๐ Website: [Coming Soon]
Need custom Laravel development or want to hire me for your project? Get in touch!
All versions of laravel-media-zone with dependencies
illuminate/support Version ^10.0|^11.0|^12.0
illuminate/http Version ^10.0|^11.0|^12.0
illuminate/database Version ^10.0|^11.0|^12.0
illuminate/routing Version ^10.0|^11.0|^12.0