npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

vue-media-manager

v0.0.3

Published

Media Manager

Downloads

201

Readme

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

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

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