A "Vuejs & Laravel" Media Manager With Tons of Features
HTML JavaScript PHP CSS Vue
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github Create issue_template.md Dec 29, 2017
logs v3.0.0 Apr 23, 2018
src v3.0.0 Apr 23, 2018
.gitignore v2.3.3 Dec 13, 2017
LICENSE Initial commit Jul 14, 2017
README.md v3.0.0 Apr 23, 2018
composer.json v2.5.3 Feb 8, 2018

README.md

Laravel Media Manager

Latest Stable Version Total Downloads Donate with Bitcoin

  • 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 vue-scroll-stop idb-keyval axios dropzone cropperjs keycode date-fns 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 vue-scroll-stop idb-keyval axios dropzone cropperjs keycode date-fns 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

  • cache requests

  • 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

  • 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,

    /*
     * automatically invalidate cache after ?
     * in "Minutes"
     */
    'cacheExpiresAfter'=> 60,
];

Usage

  • visit localhost:8000/media
  • Wiki