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

Sources of this examples 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.

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/style.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/style.css";

Configuration

Mini File Manager export 3 classes

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

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

new 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",
    // ...
  }

  multiSelection: false,
  originalSelection: ["posts/autre/ign.jpg"],
  theme: "pentatrion-theme"
};

const formFilePickerOptions: FormFilePickerOptions = {
  previewType: "image",   // "image" | "file"
  previewFilter: "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