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
- [x] vuejs component
- [x] npm package
- [ ] Integration :
- [ ] CKEditor plugin
- [ ] TinyMCE plugin
- [ ] Drupal module

Install

$3

``

...

`

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')
`

$3

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
`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
}
});
`

$3

HTML
`html




`

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

`

`javascript
var api = {
baseUrl: 'https://server.com/api/',
listUrl: 'list'
};

this.options = {
api: api,
multipleSelection: true,
onSelect: function ({selected}) {
console.log(selected)
}
}
`

Options

$3

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

$3

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

$3

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

$3

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

$3

- Type : Boolean
- Default : false

$3

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

$3

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

$3

- Type : Boolean
- Default : true

$3

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