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.
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.
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
before you configure the mini-file-manager, you must first install and configure the backend under Symfony with pentatrion/upload-bundle.
npm install mini-file-managerCopy dist/file-manager directory from node_modules/mini-file-manager to your webroot directory. it contains icons for each file type.
Copy dist/style.css directory from node_modules/mini-file-manager to your webroot file-manager directory. it contains your styles for buttons.
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,
textFormFilePicker,
entityFormFilePicker
} = miniFileManager;
// etc...
</script>or
// with bundler
import {
fileManager,
fileManagerModal,
textFormFilePicker,
entityFormFilePicker
} from "mini-file-manager";
import "mini-file-manager/dist/style.css";Mini File Manager export 4 functions
fileManager(
"#selector", // string | HTMLElement
fileManagerOptions // FileManagerOptions
);
fileManagerModal(
fileManagerOptions, // FileManagerOptions
onSuccess, // (selectedFiles: File[]) => void
onAbort // () => void
);
textFormFilePicker(
inputElt, // string | HTMLElement
fileManagerOptions, // FileManagerOptions
selection // File[]
)
entityFormFilePicker(
"#inputs-container", // string | HTMLElement
fileManagerOptions, // FileManagerOptions
uploadedFiles // File[]
onNewFormFiles // callBack (File[]) => {}
)const options: FileManagerOptions = {
canEditImageSize: true,
canRenameFile: true,
debug: false,
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",
},
],
// only for textFormFilePicker and entityFormFilePicker
form: {
filter: "small", // any filter defined in LiipImagineBundle
type: "image" // "image" | "file"
}
// 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
]
},
// 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.
},
}
// displays the files contained in the folder in the filemanager
// (otherwise only the files imported into the current session will be visible)
indexes: true,
liipResolverPrefix: '/media/cache/resolve'
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 textFormFilePicker
// selection is retrieved from input value
originalSelection: ["posts/autre/ign.jpg"],
showValidationString: true,
themePrefix: 'penta',
};
if you wants to define your own theme, you have 2 levels of customization.
- you can define your own css vars following this file :
src/css/variables.scss
:root {
--primary-color500: #ffea66;
--border-radius: .25rem;
}- you can set the
themePrefixoption with custom class to redefine your buttons in depth.
