Laravel Media Manager

Forked from ctf0/MediaManager to support Laravel v9, v10 and v11

• Installation
• Config
• Features
• Events
• Usage

• 4.0.0 - Laravel 9
• 4.0.1 - Laravel 10
• 4.0.2 - Laravel 11
• 4.0.3 - Laravel 12

Installation

• composer require ivenms/laravel-media-manager

• publish the package assets with

  php artisan vendor:publish --provider="ivenms\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 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

  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.
  • also check mix v6 notes

  // 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/mediaManager.php

Features

• 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
• toggle between random/original names for uploaded files
• asynchronous Updates
• 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 / folders
• restrict access to path
• download selected "including bulk selection"
• directly copy selected file link
• use the manager
  • from modal
  • with any wysiwyg editor
• auto scroll to selected item using "left, up, right, down, home, end"
• lock/unlock 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).

| navigation | button | keyboard | click / tap | touch | | -------------------- | --------------------------------------------------- | ---------------- | ---------------------------- | ------------------------------- | | | toggle upload panel (toolbar) | u | | | | | refresh (toolbar) | r | hold "clear cache" | pinch in (items container) | | | move/show movable list (toolbar) | m / p | | | | | image editor (toolbar) | e | | | | | delete (toolbar) | d / del | | | | | lock/unlock (toolbar) | l | hold "anything but images" | | | | change visibility (toolbar) | v | | | | | toggle bulk selection (toolbar) | b | | | | | (reset) bulk select all (toolbar) | a | | | | | add to movable list (shopping cart) | c / x | * | | | | move/show movable list (shopping cart) | | ** | | | | clear movable list (shopping cart) | | hold | | | | toggle sidebar (path bar) | t | * | swipe left/right (sidebar) | | | confirm (modal) | enter | | | | | toggle preview image/pdf/text (item) | space | ** | | | | play/pause media (item) | space | ** | | | | hide (modal / upload-panel) | esc | | | | | reset (search / bulk selection / filter / sorting) | esc | | | | | reset upload showPreview | esc | | | | | confirm upload showPreview | enter | | | | |   | | | | | | add to movable list (item) | | | swipe up | | | delete (item) | | | swipe down | | | rename (item) | | | swipe left | | | image editor (item) | | hold | | | | current ++ selected (item) | shift + click | | | | | current + selected (item) | alt/meta + click | | | | | create new folder | | ** (items container) | | | |   | | | | | go to next "item" | | right | * | swipe left (preview) | | go to prev "item" | | left | * | swipe right (preview) | | go to first "item" | | home | | | | go to last "item" | | end | | | | go to next "row" | | down | | swipe up (preview) | | go to prev "row" | | up | | swipe down (preview) | | open folder | | enter | ** | | | go to prev "dir" | folderName (path bar) | backspace | * | swipe right (items container) |

Events

| type | event-name | description | | --------------- | -------------------------------------------------- | -------------------------------------------------------------------------- | | JS | | | | | modal-show | when modal is shown | | | modal-hide | when modal is hidden | | | file_selected (when inside modal) | get selected file url | | | multi_file_selected (when inside modal) | get bulk selected files urls | | | folder_selected (when inside modal) | get selected folder path | | Laravel | | | | | MMFileUploaded($file_path, $mime_type, $options) | get uploaded file storage path, mime type, custom options | | | MMFileSaved($file_path, $mime_type) | get saved (edited/link) image full storage path, mime type | | | MMFileDeleted($file_path, $is_folder) | get deleted file/folder storage path, if removed item is a folder | | | MMFileRenamed($old_path, $new_path) | get renamed file/folder "old & new" storage path | | | MMFileMoved($old_path, $new_path) | get moved file/folder "old & new" storage path |

Usage

Wiki
Demo

• visit localhost:8000/media

Security

If you discover any security-related issues, please email [email protected].