Need help with mm?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iutbay
217 Stars 59 Forks BSD 3-Clause "New" or "Revised" License 38 Commits 9 Opened issues

Description

Open source Web File Manager (Javascript + VueJS 2)

Services available

!
?

Need anything else?

Contributors list

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 : - Webpack - VueJS 2 - Vuex - Axios - Bootstrap - Font Awesome

Demo

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

Features

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

Install

Client

...

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

HTML

html
JavaScript
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

html

JavaScript

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

Options

el

  • Type : String
  • Details : CSS selector string.

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.options

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

input

  • Type : Object
  • Default : false
  • Details : Input config.

input.el

  • Type : String
  • Details : CSS selector string.

input.multiple

  • Type : Boolean

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'.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.