Node's Pretty Magical

    vue-media-manager

    0.0.3 • Public • Published

    Media Manager

    Media Manager is an open source web file manager and can be a nice alternative to Wordpress Media Manager, CKFinder, KCFinder, elFinder... It is still in its early stages, but feel free to use it, report bugs and contribute.

    screenshot

    This project use Javascript and :

    Demo

    https://www.iutbayonne.univ-pau.fr/~klevron/mm/

    Features

    • Backends (by using flysystem) :
      • Local
      • FTP
      • SFTP
      • ...
    • Drag&drop file upload
    • Multiple file upload
    • Image preview
    • Input option
    • Multilanguage
    • File actions :
      • Details
      • Download
      • Rename / Move
      • Delete
    • Folder actions :
      • Details
      • Download
      • Rename / Move
      • Delete
    • Context menu
    • vuejs component
    • npm package
    • Integration :
      • CKEditor plugin
      • TinyMCE plugin
      • Drupal module

    Install

    Client

    <link href="mm.min.css" rel="stylesheet">
    ...
    <script src="mm.min.js"></script>
    

    or

    npm install vue-media-manager
    

    and

    import { MM } from 'vue-media-manager'
    require('vue-media-manager/dist/style.css')
    require('font-awesome/css/font-awesome.css')
    require('bootstrap/dist/css/bootstrap.css')
    require('bootstrap/dist/js/bootstrap.js')
    

    Server

    Media Manager is a client side tool, it will display files located on a server, it needs a web service to communicate with :

    • you can use a simple server : mm-server,
    • or you can build your own, take a look at API doc.

    Usage in pure JavaScript

    HTML

    <div id="media-manager"></div>

    JavaScript

    new MM({
        el: '#media-manager',
        api: {
            baseUrl: 'https://server.com/api/',
            listUrl: 'list',
            downloadUrl: 'download',  // optional
            uploadUrl: 'upload',      // optional
            deleteUrl: 'delete'       // optional
        }
    });

    With input

    HTML

    <input type="text" id="file-input">
    <div id="media-manager"></div>

    JavaScript

    new MM({
        el: '#media-manager',
        api: {
            baseUrl: 'https://server.com/api/',
            listUrl: 'list'
        },
        multipleSelection: false,
        input: '#file-input'
    });

    Usage in a VueJS project

    Vue

    <vue-media-manager :opts="options"></vue-media-manager>
    var api = {
        baseUrl: 'https://server.com/api/',
        listUrl: 'list'
    };
     
    this.options = {
        api: api,
        multipleSelection: true,
        onSelect: function ({selected}) {
            console.log(selected)
        }
    }

    Options

    el

    • Type : String
    • Details : CSS selector string. Only in pure JavaScript.

    basePath

    • Type : String
    • Default : ""
    • Details : Base path with a trailing slash, e.g. "folder/".

    api

    • Type : Object
    • Details : API Config.

    api.baseUrl

    • Type : String
    • Default : null

    api.listUrl

    • Type : String
    • Default : null

    api.downloadUrl

    • Type : String
    • Default : null

    api.uploadUrl

    • Type : String
    • Default : null

    api.requestConfig

    • Type : Object or Function
    • Default : null
    • Details : Will be used on each request to override the config passed to axios.

    api.axiosOptions

    • Type : Object
    • Default : {}
    • Details : Will be used to create an axios instance.

    input

    • Type : String
    • Details : CSS selector string.
    • Default : empty string

    multipleSelection

    • Type : Boolean
    • Default : false

    selected

    • Type : String|array
    • Details : Selected medias.

    onSelect(event)

    • Type : function
    • Details : Select callback, use event.selected to get selected files.

    showBreadcrumb

    • Type : Boolean
    • Default : true

    height

    • Type : String
    • Default : null
    • Details : Use this if you want a fixed height, e.g. '600px'.

    Keywords

    none

    Install

    npm i vue-media-manager

    DownloadsWeekly Downloads

    9

    Version

    0.0.3

    License

    BSD-3-Clause

    Unpacked Size

    225 kB

    Total Files

    7

    Last publish

    Collaborators

    • juliencroain