https://github.com/lhapaipai/mini-file-manager
A lightweight File Manager for your application
https://github.com/lhapaipai/mini-file-manager
file-browser file-manager file-picker file-upload javascript
Last synced: 4 months ago
JSON representation
A lightweight File Manager for your application
- Host: GitHub
- URL: https://github.com/lhapaipai/mini-file-manager
- Owner: lhapaipai
- License: mit
- Created: 2021-04-24T20:55:49.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T08:08:38.000Z (about 1 year ago)
- Last Synced: 2025-05-29T03:05:37.587Z (5 months ago)
- Topics: file-browser, file-manager, file-picker, file-upload, javascript
- Language: Vue
- Homepage:
- Size: 2.8 MB
- Stars: 13
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Mini File Manager
Mini File Manager is a file management interface for your Symfony backend. The connection is made with [pentatrion/upload-bundle](https://github.com/lhapaipai/upload-bundle).
Mini File Manager is very flexible, you can :
- upload big files / resume uploads with [resumableJS](https://github.com/23/resumable.js/) integration.
- crop / resize / rotate image after their upload.
- custom easily the theme with CSS variables.
- localize the application.
## Getting started
if you want a practical [**minimal installation recipe**](https://github.com/lhapaipai/mini-file-manager/blob/main/docs/getting-started.md) 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](https://github.com/lhapaipai/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](https://github.com/lhapaipai/upload-bundle).
### FrontEnd
```console
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/style.css` directory from `node_modules/mini-file-manager` to your webroot `file-manager` directory. it contains your styles for buttons.
#### with UMD / ES Modules
`mini-file-manager.umd.js` provides `miniFileManager` global variable.
```html
let {
fileManager,
fileManagerModal,
textFormFilePicker,
entityFormFilePicker
} = miniFileManager;
// etc...
```
or
```js
// with bundler
import {
fileManager,
fileManagerModal,
textFormFilePicker,
entityFormFilePicker
} from "mini-file-manager";
import "mini-file-manager/dist/style.css";
```
## Configuration
Mini File Manager export 4 functions
```js
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[]) => {}
)
```
```ts
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',
};
```
### Theme
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`
```css
:root {
--primary-color500: #ffea66;
--border-radius: .25rem;
}
```
- you can set the `themePrefix` option with custom class to redefine your buttons in depth.
## Screenshots
### Mobile friendly
