PHPackages yazilim360/laravel-media-manager - 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. yazilim360/laravel-media-manager ActiveLibrary[File & Storage](/categories/file-storage) yazilim360/laravel-media-manager ================================ Modern Vue 3 media manager for Laravel with Spatie MediaLibrary integration. Features virtual folders, dark mode, drag & drop upload, and infinite scroll. v1.0.5(1mo ago)19MITPHPPHP ^8.0 Since Apr 25Pushed 1mo agoCompare [ Source](https://github.com/ismetertekin/laravel-media-manager)[ Packagist](https://packagist.org/packages/yazilim360/laravel-media-manager)[ RSS](/packages/yazilim360-laravel-media-manager/feed)WikiDiscussions master Synced 1w ago READMEChangelog (3)Dependencies (2)Versions (7)Used By (0) Laravel Media Manager ===================== [](#laravel-media-manager) [![Media Manager Demo](./screen/media-demo.gif)](./screen/media-demo.gif) [📁 View more screens and demos](./screen) A production-ready, reusable Laravel package with a modern, WordPress-like media manager modal. Built with Vue 3 and powered by Spatie Laravel MediaLibrary. Features -------- [](#features) - **Spatie Integration**: Seamless backend file management using Spatie MediaLibrary. - **Modern UI**: Clean, responsive Vue 3 components with light and dark mode support. - **Standalone Build**: Zero frontend dependencies required. Packaged as a drop-in IIFE script. - **Virtual Folders**: Organize files into hierarchical folders (stored in database). - **Image Processing**: Automatic conversions (thumb, medium, large) and WebP generation. - **Infinite Scroll**: Smoothly browse large media collections. - **Multi-select**: Support for single or multiple file selection with configurable limits. - **Drag & Drop**: Effortless file uploads via drag-and-drop. - **Theme-agnostic**: Self-contained CSS with custom properties that adapt to any admin theme. Installation ------------ [](#installation) 1. Add the package to your `composer.json`: ``` composer require yazilim360/laravel-media-manager ``` 2. Publish the assets (REQUIRED for the frontend to work): ``` php artisan vendor:publish --tag=media-manager-assets --force ``` 3. Run the database migrations (creates all necessary tables automatically): ``` php artisan migrate ``` 4. (Optional) Publish configuration and views if you need to customize them: ``` php artisan vendor:publish --tag=media-manager-config php artisan vendor:publish --tag=media-manager-views ``` Usage Methods ------------- [](#usage-methods) There are two main ways to use this package, depending on how much control you need over your frontend. ### Method 1: Using the Blade Component (Easiest) [](#method-1-using-the-blade-component-easiest) If you want a quick plug-and-play button, simply drop the provided Blade component anywhere in your views. It will automatically load the required CSS/JS from the `public/vendor` directory and render a trigger button. ``` ``` Then handle the callback in your JavaScript: ``` function myCallbackFunction(selectedFiles) { console.log('User selected:', selectedFiles); } ``` ### Method 2: Manual JavaScript API (Advanced Customization) [](#method-2-manual-javascript-api-advanced-customization) If you have your own custom UI (e.g., an existing image input in your admin theme) and don't want to use the `` component, you can trigger the Media Manager entirely via JavaScript. **Step 1:** Include the CSS, JS, and the mounting `div` somewhere on your page: ``` ``` **Step 2:** Bind the API to your custom button: ``` Edit Avatar document.addEventListener('DOMContentLoaded', function () { const editBtn = document.querySelector('.my-custom-edit-button'); if (editBtn) { editBtn.addEventListener('click', function (e) { e.preventDefault(); window.MediaManager.open({ multiple: false, types: ["image"], // only allow images sidebar: true, // dynamically show/hide sidebar theme: 'dark', // dynamically set theme ('light' or 'dark') locale: 'tr', // dynamically set language ('en' or 'tr') onSelect: function (selectedFiles) { console.log('Selected File Details:', selectedFiles); // Update your custom UI here } }); }); } }); ``` ### TinyMCE Integration [](#tinymce-integration) You can easily use the Media Manager as the central file picker for TinyMCE. Just use the `file_picker_callback` option in your TinyMCE initialization: ``` tinymce.init({ selector: '#my-editor', plugins: 'image media link', toolbar: 'image media link', file_picker_callback: function (callback, value, meta) { // Determine allowed types based on what button was clicked in TinyMCE let allowedTypes = ['image', 'video', 'document']; if (meta.filetype === 'image') allowedTypes = ['image']; if (meta.filetype === 'media') allowedTypes = ['video']; window.MediaManager.open({ multiple: false, types: allowedTypes, onSelect: function (files) { if (files.length > 0) { // Pass the URL back to TinyMCE callback(files[0].url, { alt: files[0].name }); } } }); } }); ``` Development & Building -------------------------- [](#development--building) If you are modifying the package's Vue components and need to rebuild the `dist` files, use the dedicated Vite library configuration. From the root of your package directory: ``` npx vite build -c vite.config.js ``` This will compile everything (including Vue and Axios) into a standalone drop-in IIFE script inside the `dist` folder. Configuration ------------- [](#configuration) The `config/media-manager.php` file allows you to customize storage: ``` return [ 'disk_path' => 'media-manager', // Path on disk 'sidebar' => true, // Sidebar default visibility 'default_view' => 'grid', // 'grid' or 'list' 'allowed_locales' => ['en', 'tr'], // Supported languages // ... ]; ``` ### Health Score 39 — LowBetter than 84% of packages Maintenance91 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 6 Last Release 45d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/325a87e762fcb4f9fe24392677d2cabe7356982218a7c34e111dca92d698fbfc?d=identicon)[iertekin](/maintainers/iertekin) --- Top Contributors [![ismetertekin](https://avatars.githubusercontent.com/u/35383766?v=4)](https://github.com/ismetertekin "ismetertekin (1 commits)") ### Embed Badge ![Health badge](/badges/yazilim360-laravel-media-manager/health.svg) ``` [![Health](https://phpackages.com/badges/yazilim360-laravel-media-manager/health.svg)](https://phpackages.com/packages/yazilim360-laravel-media-manager) ``` ### Alternatives [illuminate/filesystem The Illuminate Filesystem package. 15163.8M3.0k](/packages/illuminate-filesystem)[livewire-filemanager/filemanager A simple, friendly and practical Livewire filemanager for your applications 3619.3k1](/packages/livewire-filemanager-filemanager) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)