ctf0 / Laravel-Media-Manager by ctf0

• to optimize uploaded files on the fly try spatie

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-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js
  # or
  npm install vue vue-ls vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js --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.

  // app.js
  
  window.Vue = require('vue')
  
  // pre Laravel v5.7
  require('../vendor/MediaManager/js/manager')
  // Laravel v5.7
  // require('../assets/vendor/MediaManager/js/manager')
  
  new Vue({
      el: '#app'
  })
  

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"

• toggle between random/original names for uploaded files

• upload an image from a url

• load image on demand

• cache requests

• asynchronous Updates

• bulk selection

• change item/s visibility

• update the page url while 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 folder or globally through the entire collection.

• filter by

  • folder
  • image
  • audio
  • video
  • text/pdf
  • application/archive
  • locked items
  • selected items

• sort by

  • name "default"
  • 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

• auto-play media files "if selected filter is audio/video"

• 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 finder".
  • 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 "> 1087px". * 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 (toolbar) | m | | | | | 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 | | | | | 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 / global-search) | esc | | | | | reset (search / bulk selection / filter) | esc | | | | |   | | | | | | move (item) | | | swipe up | | | delete (item) | | | swipe down | | | rename (item) | | | swipe left | | | image editor (item) | | hold | | | | limit bulk select (item) | shift + click | | | | | current + next bulk select (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 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 urls | | | folder_selected (when inside modal) | get selected folder path | | Laravel | | | | | MMFileUploaded($file_path, $mime_type) | get uploaded file full path & mime type | | | MMFileSaved(https://github.com/ctf0/Laravel-Media-Manager/blob/master/$file_path, $mime_type) | get saved (edited/link) image full path & mime type | | | 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' => '.\_\-\'\s\(\)\,',

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

    /*
     * disallow uploading files with the following mimetypes
     * https://www.iana.org/assignments/media-types/media-types.xhtml
     */
    'unallowed_mimes' => ['php', 'java'],

    /*
     * extra mime-types
     */
    'extended_mimes' => [
        'image' => [
            'binary/octet-stream',
        ],
        'archive' => [
            'application/x-tar',
            'application/zip',
        ],
    ],

    /*
     * 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 only when item is clicked ?
     */
    'lazy_load_image_on_click' => false,

    /*
     * automatically invalidate cache after "in Minutes"
     */
    'cache_expires_after' => 60,

    /*
     * in-order to get the folder items count & size
     * we need to recursively get all the files inside the folders
     * which could make the request take longer
     */
    'get_folder_info' => true,

    /**
     * do you want to enable broadcasting the changes
     * made by one user to others ?
     *
     * "laravel-echo" must be installed
     */
    'enable_broadcasting' => false,

    /**
     * show "an itunes like" content ratio bar
     */
    'show_ratio_bar' => true
];

Usage

Wiki Demo

• visit localhost:8000/media