Laravel Media Manager

• to optimize uploaded files on the fly try approached or spatie

• package requires Laravel v5.4+

Installation

• composer require ctf0/media-manager

• (Laravel < 5.5) add the service provider to config/app.php

'providers' => [
    ctf0\MediaManager\MediaManagerServiceProvider::class,
]

• publish the package assets with

php artisan vendor:publish --provider="ctf0\MediaManager\MediaManagerServiceProvider"

• after installation, package will auto-add

  • package routes to routes/web.php
  • package assets compiling to webpack.mix.js

• install dependencies

yarn add vue vue-ls vue-tippy@v1 vue2-filters vue-bounty vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode babel-preset-es2015-node6 babel-preset-stage-2
# or
npm install vue vue-ls vue-tippy@v1 vue2-filters vue-bounty vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode babel-preset-es2015-node6 babel-preset-stage-2 --save

• 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

require('../vendor/MediaManager/js/manager')

new Vue({
    el: '#app'
})

Features

• image editor

• multi

  • upload
  • move/copy
  • delete

• upload an image from a url

• lazy load image preview

• bulk selection

• change item/s visibility

• dynamically hide files

• dynamically hide folders

• toggle between random/original names for uploaded files

• download selected "including bulk selection"

• directly copy selected file link

• use the manager

  • from modal
  • with any wysiwyg editor

• auto scroll to selected item when using (left/up, right/down, home, end)

• lock/unlock selected files/folders "sqLite must be installed"

• search

• filter by

  • folder
  • image
  • audio
  • video
  • text/pdf
  • locked items

• sort by

  • name "default"
  • size
  • last modified

• items count for

  • all
  • selected
  • search found

• protection against overwriting (files/folders)

• autoplay media files "if selected filter is audio/video"

• file name sanitization for

  • upload
  • rename
  • new folder

• disable/enable buttons depend on the usage to avoid noise & keep the user focused

• shortcuts

  navigation	button	keyboard	click / tap	touch
  	upload (toolbar)	u	*
  	refresh (toolbar)	r	* / hold (clear cache)
  	move (toolbar)	m	*	swipe up
  	image editor (toolbar)	e	*
  	delete (toolbar)	d/del	*	swipe down
  	lock/unlock (toolbar)	l	*
  	change visibility (toolbar)	v	*
  	(reset) bulk select (toolbar)	b	*
  	(reset) bulk select all (toolbar)	a	*
  	cancel bulk selection	esc
  	cancel search (toolbar)	esc	*
  	toggle (sidebar)	t	*
  	play/pause media (sidebar)	space	*
  	preview image/pdf/text (sidebar)	space	*
  	confirm rename (modal)	enter	*
  	confirm delete (modal)	enter	*
  	confirm move (modal)	enter	*
  	create new folder (modal)	enter	*
  	limit bulk select (files container)	shift + click
  	preview image/pdf/text (files container)	space	**
  	image editor (files container)		hold
  	hide (preview)	space/esc	*
  select next		right / down	*	swipe left (preview)
  select prev		left / up	*	swipe right (preview)
  select first		home
  select last		end
  open folder		enter	**
  go to prev dir	folderName (breadcrumb)	backspace	*	swipe right

• events

  type	event-name	description
  JS
  	modal-show	when modal is showen
  	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 url
  	folder_selected (when inside modal)	get selected folder path
  Laravel
  	MMFileUploaded($file_path)	get uploaded file full path
  	MMFileSaved($file_path)	get saved(edited/link) image full path
  	MMFileDeleted($file_path, $is_folder)	get deleted file/folder full path
  	MMFileRenamed($old_path, $new_path)	get renamed file/folder "old & new" path
  	MMFileMoved($old_path, $new_path)	get moved file/folder "old & new" path

Config

config/mediaManager.php

return [
    /*
     * ignore files pattern
     */
    'ignore_files' => '/^\..*/',

    /*
     * filesystem disk
     */
    'storage_disk' => 'public',

    /*
     * manager controller
     */
    'controller' => '\ctf0\MediaManager\Controllers\MediaController',

    /*
     * remove any file special chars except (. _ -)
     */
    'allowed_fileNames_chars' => '.\_\-',

    /*
     * remove any folder special chars except (_ -)
     */
    'allowed_folderNames_chars' => '\_\-',

    /*
     * disallow uploading files with the following mimetypes
     * https://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types
     */
    'unallowed_mimes' => ['php', 'java'],

    /*
     * other mime-types for images
     */
    'image_extended_mimes' => [
        'binary/octet-stream', // aws
    ],

    /*
     * when file names gets cleand up
     */
    'sanitized_text' => uniqid(),

    /*
     * display file last modification time as
     * http://carbon.nesbot.com/docs/#api-formatting
     */
    'last_modified_format' => 'toDateString',

    /**
     * hide file extension in files list
     */
    'hide_files_ext' => true,

    /*
     * load image preview when item is clicked
     */
    'lazy_load_image_on_click' => false,
];

Usage

• visit localhost:8000/media
• Wiki
• Cacheing Strategy