README

Laravel Media Manager

to optimize uploaded files on the fly try spatie

Installation

composer require alvazz/media-manager

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

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

publish the package assets with

php artisan vendor:publish --provider="alvazz\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).
events

Config

config/mediaManager.php

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

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

    /*
     * manager controller
     */
    'controller' => '\alvazz\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

alvazz / ohohmnm

Maintainers

Details

README

Laravel Media Manager

Installation

Features

Config

Usage