PHPackages interactively/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. [Image & Media](/categories/media) 4. / 5. interactively/media-manager ActiveLibrary[Image & Media](/categories/media) interactively/media-manager =========================== A Media Manager Built With Vuejs & Laravel 11.0(1y ago)01.2k↑25%MITJavaScript Since Feb 27Pushed 1y agoCompare [ Source](https://github.com/CiprianOpreaPrestimedia/Laravel-Media-Manager)[ Packagist](https://packagist.org/packages/interactively/media-manager)[ Docs](https://github.com/ctf0/Laravel-Media-Manager)[ GitHub Sponsors](https://github.com/sponsors/ctf0)[ RSS](/packages/interactively-media-manager/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (3)Versions (2)Used By (0) Laravel Media Manager [![Browser Status](https://camo.githubusercontent.com/189a96f78175553e2ff10080f9e54aed2a312694c25bc9ff3841fc21372fac93/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d76372b2d726564)](https://packagist.org/packages/laravel/laravel) [![Latest Stable Version](https://camo.githubusercontent.com/27c6ddf31fa7a246a019d27f90aaa8e9f8c50b1a5089c6a1c1d5a86093f28fc8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f637466302f6d656469612d6d616e616765722e737667)](https://packagist.org/packages/ctf0/media-manager) [![Total Downloads](https://camo.githubusercontent.com/933dfa3b19592835338543b19339811ac75e05aac25b90fe42527eff2fd41e29/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f637466302f6d656469612d6d616e616765722e737667)](https://packagist.org/packages/ctf0/media-manager) [![Browser Status](https://camo.githubusercontent.com/a8dbb4f244848d7be51fa212b9cc4a244cb066ee779beea925d89125a513c2ef/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f66697265666f783d3631266d6963726f736f6674656467653d313726676f6f676c656368726f6d653d3531267361666172693d313026696578706c6f72653d213f)](https://camo.githubusercontent.com/a8dbb4f244848d7be51fa212b9cc4a244cb066ee779beea925d89125a513c2ef/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f66697265666f783d3631266d6963726f736f6674656467653d313726676f6f676c656368726f6d653d3531267361666172693d313026696578706c6f72653d213f) ================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================ [](#----laravel-media-manager------------------------) [![main](https://user-images.githubusercontent.com/7388088/70385131-c0937e80-1993-11ea-9513-cb5c90f4281b.png)](https://user-images.githubusercontent.com/7388088/70385131-c0937e80-1993-11ea-9513-cb5c90f4281b.png) [![card](https://user-images.githubusercontent.com/7388088/75881844-8fa6d680-5e28-11ea-8a38-09bbce94d68e.png)](https://user-images.githubusercontent.com/7388088/75881844-8fa6d680-5e28-11ea-8a38-09bbce94d68e.png) - [Installation](#Installation) - [Config](#Config) - [Features](#Features) - [Events](#Events) - [Usage](#Usage) Installation ------------ [](#installation) - `composer require ctf0/media-manager` - publish the package assets with `php artisan vendor:publish --provider="ctf0\MediaManager\MediaManagerServiceProvider"` - after installation, run `php artisan lmm:setup` to add - package routes to `routes/web.php` - package assets compiling to `webpack.mix.js` - for [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder) item/s we use a db "sqlite" but if you prefer to use something else you should run the migration ``` php artisan migrate ``` - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use) ``` yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang yarn add buffer process --dev ``` - add this one liner to your main js file and run `npm run watch` to compile your `js/css` files. - if you are having issues [Check](https://ctf0.wordpress.com/2017/09/12/laravel-mix-es6/). - also check [mix v6 notes](https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6) ``` // app.js // mix v5 window.Vue = require('vue') // mix v6 import Vue from 'vue' require('../assets/vendor/MediaManager/js/manager') new Vue({ el: '#app' }) ``` Config ------ [](#config) - [**config/mediaManager.php**](./src/config/mediaManager.php) Features -------- [](#features) - [image editor](https://github.com/ctf0/Laravel-Media-Manager/wiki/Image-Editor) - multi - upload - move/copy - delete - upload by either - using the upload panel - drag & drop anywhere - click & hold on an empty area **"items container"** - from a url **"images only"** - [preview files before uploading](https://github.com/ctf0/Laravel-Media-Manager/wiki/Preview-Files-Before-Uploading) - toggle between `random/original` names for uploaded files - [asynchronous Updates](https://github.com/ctf0/Laravel-Media-Manager/wiki/Async-Update-The-Manager) - bulk selection - bookmark visited directories for quicker navigation - change item/s visibility - update the page url on navigation - show audio files info **"artist, album, year, etc.."** - dynamically hide [files](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Files-With-Extension) / [folders](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Folders) - [restrict access to path](https://github.com/ctf0/Laravel-Media-Manager/wiki/Restrict-Access-To-Path) - download selected ["including bulk selection"](https://github.com/ctf0/Laravel-Media-Manager/wiki/Download-Files-as-a-ZipFile) - directly copy selected file link - use the manager - [from modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal) - [with any wysiwyg editor](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-With-Any-WYSIWYG-Editor) - auto scroll to selected item using **"left, up, right, down, home, end"** - [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder) item/s. - search in the current directory **or** globally through the entire collection. - filter by - folder - image - audio - video - text/pdf - application/archive - locked items - selected items - sort by - name - size - last modified - items count for - all - selected - search found - contents ratio bar - protection against overwriting (files/folders) - file name sanitization for - upload - rename - new folder - disable/enable buttons depend on the usage to avoid noise & keep the user focused - shortcuts / gestures - if no more **rows** available, pressing `down` will go to the last item in the list **"same as native file manager"**. - when viewing a `audio/video` file in the preview card, pressing `space` will **play/pause** the item instead of closing the modal. - dbl click/tap - any file of type `audio/video` when sidebar is hidden, will open it in the preview card **"same as images"**. - any file of type `application/archive` will download it. - all the **left/right** gestures have their counterparts available as well. - pressing `esc` while using the ***image editor*** wont close the modal but you can ***dbl click/tap*** the `modal background` to do so. **"to avoid accidentally canceling your changes"**. > \- the info sidebar is only available on big screens **"> 1023px"**. > \- to stop interfering with other `keydown` events you can toggle the manager listener through > `EventHub.fire('disable-global-keys', true/false)`. navigationbuttonkeyboardclick / taptouchtoggle upload panel *(toolbar)*urefresh *(toolbar)*rhold *"clear cache"*pinch in *(items container)*[move/show movable list](https://github.com/ctf0/Laravel-Media-Manager/wiki/Movable-List) *(toolbar)*m / pimage editor *(toolbar)*edelete *(toolbar)*d / dellock/unlock *(toolbar)*lhold *"anything but images"*change visibility *(toolbar)*vtoggle bulk selection *(toolbar)*b(reset) bulk select all *(toolbar)*aadd to movable list *(shopping cart)*c / x\*[move/show movable list](https://github.com/ctf0/Laravel-Media-Manager/wiki/Movable-List) *(shopping cart)*\*\*clear movable list *(shopping cart)*holdtoggle sidebar *(path bar)*t\*swipe left/right *(sidebar)*confirm *(modal)*entertoggle preview image/pdf/text *(item)*space\*\*play/pause media *(item)*space\*\*hide (modal / upload-panel)escreset (search / bulk selection / filter / sorting)escreset upload [showPreview](https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/config/mediaManager.php#L126)escconfirm upload [showPreview](https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/config/mediaManager.php#L126)enter add to movable list *(item)*swipe updelete *(item)*swipe downrename *(item)*swipe leftimage editor *(item)*holdcurrent ++ selected *(item)*shift + clickcurrent + selected *(item)*alt/meta + clickcreate new folder\*\* *(items container)* go to next *"item"*right\*swipe left *(preview)*go to prev *"item"*left\*swipe right *(preview)*go to first *"item"*homego to last *"item"*endgo to next *"row"*downswipe up *(preview)*go to prev *"row"*upswipe down *(preview)*open folderenter\*\*go to prev *"dir"*folderName *(path bar)*backspace\*swipe right *(items container)* Events ------ [](#events) typeevent-namedescription[JS](https://github.com/gocanto/vuemit)modal-showwhen modal is shownmodal-hidewhen modal is hiddenfile\_selected *([when inside modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal))*get selected file urlmulti\_file\_selected *([when inside modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal))*get bulk selected files urlsfolder\_selected *([when inside modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal))*get selected folder path[Laravel](https://laravel.com/docs/master/events#manually-registering-events)MMFileUploaded($file\_path, $mime\_type, $options)get uploaded file storage path, mime type, [custom options](https://github.com/ctf0/Laravel-Media-Manager/wiki/Preview-Files-Before-Uploading#-send-custom-options-with-uploaded-files)[MMFileSaved](https://github.com/ctf0/Laravel-Media-Manager/wiki/Image-Editor#optimize-edited-images-on-save)($file\_path, $mime\_type)get saved (edited/link) image full storage path, mime typeMMFileDeleted($file\_path, $is\_folder)get deleted file/folder storage path, if removed item is a folderMMFileRenamed($old\_path, $new\_path)get renamed file/folder "old & new" storage pathMMFileMoved($old\_path, $new\_path)get moved file/folder "old & new" storage path Usage ----- [](#usage) > [Wiki](https://github.com/ctf0/Laravel-Media-Manager/wiki) > [Demo](https://github.com/ctf0/demos/tree/media-manager) - visit `localhost:8000/media` ### Security [](#security) If you discover any security-related issues, please email . ### Health Score 30 — LowBetter than 65% of packages Maintenance44 Moderate activity, may be stable Popularity19 Limited adoption so far Community15 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 93.7% 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 Unknown Total 1 Last Release 437d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3ab8ed234d07c14f718f8a4dc5945f562b741bf9d75a73f40b58fc4c53d9dab5?d=identicon)[CiprianOpreaPrestimedia](/maintainers/CiprianOpreaPrestimedia) --- Top Contributors [![ctf0](https://avatars.githubusercontent.com/u/7388088?v=4)](https://github.com/ctf0 "ctf0 (282 commits)")[![emielmolenaar](https://avatars.githubusercontent.com/u/2470795?v=4)](https://github.com/emielmolenaar "emielmolenaar (4 commits)")[![CiprianOpreaPrestimedia](https://avatars.githubusercontent.com/u/39329521?v=4)](https://github.com/CiprianOpreaPrestimedia "CiprianOpreaPrestimedia (4 commits)")[![PaulKish](https://avatars.githubusercontent.com/u/1260259?v=4)](https://github.com/PaulKish "PaulKish (2 commits)")[![chriys](https://avatars.githubusercontent.com/u/7218422?v=4)](https://github.com/chriys "chriys (2 commits)")[![rohanvakharia](https://avatars.githubusercontent.com/u/6183560?v=4)](https://github.com/rohanvakharia "rohanvakharia (1 commits)")[![Sparclex](https://avatars.githubusercontent.com/u/2805213?v=4)](https://github.com/Sparclex "Sparclex (1 commits)")[![yaroslawww](https://avatars.githubusercontent.com/u/23663794?v=4)](https://github.com/yaroslawww "yaroslawww (1 commits)")[![djoeycl](https://avatars.githubusercontent.com/u/53512949?v=4)](https://github.com/djoeycl "djoeycl (1 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (1 commits)")[![onipp](https://avatars.githubusercontent.com/u/11645701?v=4)](https://github.com/onipp "onipp (1 commits)")[![palpalani](https://avatars.githubusercontent.com/u/716695?v=4)](https://github.com/palpalani "palpalani (1 commits)") --- Tags laravelguimanagermediamediamanagerctf0 ### Embed Badge ![Health badge](/badges/interactively-media-manager/health.svg) ``` [![Health](https://phpackages.com/badges/interactively-media-manager/health.svg)](https://phpackages.com/packages/interactively-media-manager) ``` ### Alternatives [bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k22](/packages/bkwld-croppa)[tomatophp/filament-media-manager Manage your media files using spatie media library with easy to use GUI for FilamentPHP 14543.9k3](/packages/tomatophp-filament-media-manager) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)