mini-file-manager

Mini File Manager

Mini File Manager is a file management interface for your Symfony backend. The connection is made with pentatrion/upload-bundle.

Dependances

Mini File Manager is designed with Vue (unless you modify the sources, the dependencies are integrated into the module) and you have to configure a Symfony backend to manage your files.

i18n integration, available in English and French or provide your own Translation file. PRs are welcome.

• Symfony v5
  • pentatrion/upload-bundle
  • liip/imagine-bundle
  • symfony/validator

Examples

Full integration

You can see an example here : Live Demo

Sources of this example are available in a separate repository mini-file-manager-template. This example contain full integration of the manager with form (file picker, wysiwyg), and simple file manager.

Partial integration

If you want to see basic utilisation of the manager you can see examples in the public directory.

After configuring a backend, change the endPoint option in the example-01-umd.html file and type :

npm run serve

Your example is available on http://localhost:5000/example-01-umd.html

Installation

BackEnd

before you configure the mini-file-manager, you must first install and configure the backend under Symfony with pentatrion/upload-bundle.

FrontEnd

npm install mini-file-manager

Copy dist/file-manager directory from node_modules/mini-file-manager to your webroot directory. it contains icons for each file type and icons for buttons.

with UMD / ES Modules

mini-file-manager.umd.js provides miniFileManager global variable.

<!-- with UMD -->
<link rel="stylesheet" href="/dist/style.css" />
<div id="file-manager"></div>
<script src="/dist/mini-file-manager.umd.js"></script>
<script>
  let { createFileManager, openFileManager } = miniFileManager;
  // etc...
</script>

or

<!-- with ES modules -->
<link rel="stylesheet" href="/dist/style.css" />
<div id="file-manager"></div>
<script type="module">
  import {
    createFileManager,
    openFileManager,
  } from "/dist/mini-file-manager.es.js";
  // etc...
</script>

or

// with bundler
import { createFileManager, openFileManager } from "mini-file-manager";
import "mini-file-manager/dist/style.css";

Custom installation

if you want to customize styles, you need to use mini-file-manager with a bundler (Rollup/Vite/Webpack) you probably need to install custom loader to compile Vue 3 template files and mini-notifier (if you want to import style files)

npm i mini-notifier

import {
  createFileManager,
  openFileManager,
} from "mini-file-manager/src/main-without-theme";

import "mini-file-manager/src/css/index.scss";
import "mini-notifier/dist/style.css";

Configuration

Mini File Manager export 2 functions

createFileManager("#selector", options);

openFileManager(options, onSuccess, onAbort);

function onSuccess(files) {
  console.log("selected files", files);
}
function onAbort() {
  console.log("abort");
}

const options = {
  endPoint: "http://url-to-backend.com/media-manager",
  entryPoints: [
    {
      label: "Conversation",
      // base directory relative to origin
      directory: "projet/mon-projet",
      origin: "private_uploads",
      // readOnly mode -> can't upload/modify/rename/delete files
      readOnly: false,
      icon: "fa-lock",
    },
  ],

  locale: "en", // "en" | "fr" | "custom"
  localeData: {
    // if "custom" write here your translations by referring to the file
    // https://github.com/lhapaipai/mini-file-manager/blob/main/src/locales.js
    apply: "foo",
    cancel: "bar",
    editAndSelect: "baz",
    // ...
  }

  // if you want to filter files you can select
  // only for the modal "openFileManager"
  fileValidation: {
    mimeGroup: "image",
    allowDir: false,
    imageOptions: {
      allowSvg: false,
      width: 1200,
      height: 900,
      minWidth: 1200,
      maxWidth: 800,
      minHeight: 1200,
      maxHeight: 800,
      ratio: 0.66, // float number : width/height

      // note : if you give a width and a height, the ratio is calculated
      // and only the width and the ratio are used.
    },
  },

  originalSelection: ["posts/autre/ign.jpg"],
};

Screenshots

Mobile friendly