A "Vuejs & Laravel" Media Manager With Tons of Features
JavaScript HTML PHP Vue CSS
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.1.3 Jul 1, 2018
src rdme Aug 16, 2018
.gitignore v2.3.3 Dec 13, 2017
LICENSE Initial commit Jul 14, 2017
README.md rdme Aug 16, 2018
composer.json v3.1.2 Jun 23, 2018

README.md

Laravel Media Manager

Latest Stable Version Total Downloads

  • to optimize uploaded files on the fly try 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-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web fuse.js
    # or
    npm install vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web 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')
    
    require('../vendor/MediaManager/js/manager')
    
    new Vue({
        el: '#app'
    })

Features

  • image editor

  • multi

    • upload
    • move/copy
    • delete
  • 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

  • dynamically hide files / folders

  • restrict access to path

  • download selected "including bulk selection"

  • directly copy selected file link

  • use the manager

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

  • lock/unlock item/s "sqLite must be installed"

  • search current/global

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

  • file name sanitization for

    • upload
    • rename
    • new folder
  • autoplay media files "if selected filter is audio/video"

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

  • shortcuts / gestures

    navigation button keyboard click / tap touch
    toggle upload panel (toolbar) u *
    refresh (toolbar) r * / hold (clear ls & cache)
    move (toolbar) m *
    image editor (toolbar) e *
    delete (toolbar) d / del *
    lock/unlock (toolbar) l *
    change visibility (toolbar) v *
    toggle bulk selection (toolbar) b *
    (reset) bulk select all (toolbar) a *
    toggle sidebar (path bar) t *
    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) esc
     
    move (item) swipe up
    delete (item) swipe down
    image editor (item) hold
    limit bulk select (item) shift + click
    current + next bulk select (item) alt/meta + click
     
    select next (item) right * swipe left (preview)
    select prev (item) left * swipe right (preview)
    select first (item) home
    select last (item) end
    select next (row) down
    select prev (row) up
    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) 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 only when item is clicked ?
     */
    'lazy_load_image_on_click' => false,

    /*
     * automatically invalidate cache after "in Minutes"
     */
    'cacheExpiresAfter' => 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
];

Usage

Wiki
Demo

  • visit localhost:8000/media