Laravel Media Manager

Installation
Config
Features
Events
Usage

Installation

composer require ctf0/media-manager
publish the package assets with
php artisan vendor:publish --provider="ctf0MediaManagerMediaManagerServiceProvider"
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.

// app.js// mix v5window.Vue = require('vue')// mix v6import Vue from 'vue'require('../assets/vendor/MediaManager/js/manager')new Vue({el: '#app'})

if you are having issues Check.
also check mix v6 notes

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

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.
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
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