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.

Mini File Manager is very flexible, you can :

• upload big files / resume uploads with resumableJS integration.
• crop / resize / rotate image after their upload.
• custom easily the theme with CSS variables.
• localize the application.

You can see an example here : Live Demo (TinyMCE integration / File Picker with form)

Getting started

if you want a practical minimal installation recipe you can follow this tutorial which will not take you more than 5 minutes.

if you want a full example you can consult the sources of mini-file-manager-template. This example contain full integration of the manager with form (file picker, wysiwyg), and simple file manager.

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

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.

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

with UMD / ES Modules

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

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

or

// with bundler
import {
  FileManager,
  FileManagerModal,
  FormFilePicker
} from "mini-file-manager";
import "mini-file-manager/dist/mini-file-manager.css";

Configuration

Mini File Manager export 3 functions

FileManager(
  "#selector",        // string | HTMLElement
  fileManagerOptions  // FileManagerOptions
);

FileManagerModal(
  fileManagerOptions, // FileManagerOptions
  onSuccess,          // (selectedFiles: Files[]) => void
  onAbort             // () => void
);

FormFilePicker(
  inputElt,             // string | HTMLElement
  formFilePickerOptions,// FormFilePickerOptions
  fileManagerOptions,   // FileManagerOptions
  selection             // Files[]
)

const options: FileManagerOptions = {
  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",
    },
  ],

  // if you wants 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.
    },
  }

  // if you wants to filter files you can upload
  fileUpload: {
    maxFileSize: 500 * 1024 * 1024, // 500Mo
    fileType: [
      "text/*",
      "image/*", // image/vnd.adobe.photoshop  image/x-xcf
      "video/*",
      "audio/*",
      "application/rtf",
      "application/pdf",
      "application/xml",
      "application/zip",
      "font/ttf",
      "font/woff",
      "font/woff2",
      "application/vnd.oasis.opendocument.spreadsheet", // libreoffice ods
      "application/vnd.oasis.opendocument.text", // libreoffice odt
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // docx
      "application/msword", // doc
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // xlsx
      "application/vnd.ms-excel", // xls
      "application/json",
      "application/illustrator", // .ai
    ]
  },
  
  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",
    // ...
  }

  multiple: false,

  // not needed with FormFilePicker
  // selection is retrieved from input value
  originalSelection: ["posts/autre/ign.jpg"],

  theme: "pentatrion-theme"
};

const formFilePickerOptions: FormFilePickerOptions = {
  type: "image",   // "image" | "file"
  filter: "small", // any filter defined in LiipImagineBundle
  multiple: true,
};

Theme

if you wants to define your own theme, you can set the theme option with custom class and redefine the css variables from src/css/variables.css with this class.

const options = {
  //...
  theme: 'my-own-theme'
};

.my-own-theme {
  --primary-color-light: #fff9d2;
  --primary-color: #ffe64b;
  --primary-color-active: #fadf30;
  --primary-color-dark: #eac800;

  /* etc... */
}

Screenshots

Mobile friendly