{"id":16497488,"url":"https://github.com/lhapaipai/mini-file-manager","last_synced_at":"2025-06-18T14:35:39.783Z","repository":{"id":46333105,"uuid":"361264984","full_name":"lhapaipai/mini-file-manager","owner":"lhapaipai","description":"A lightweight File Manager for your application","archived":false,"fork":false,"pushed_at":"2024-10-01T08:08:38.000Z","size":2939,"stargazers_count":13,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T03:05:37.587Z","etag":null,"topics":["file-browser","file-manager","file-picker","file-upload","javascript"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lhapaipai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-24T20:55:49.000Z","updated_at":"2025-05-19T23:14:47.000Z","dependencies_parsed_at":"2025-02-13T00:32:25.436Z","dependency_job_id":"dcfacb1f-1aa4-4040-970c-cb3ff6c0096a","html_url":"https://github.com/lhapaipai/mini-file-manager","commit_stats":null,"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"purl":"pkg:github/lhapaipai/mini-file-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhapaipai%2Fmini-file-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhapaipai%2Fmini-file-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhapaipai%2Fmini-file-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhapaipai%2Fmini-file-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lhapaipai","download_url":"https://codeload.github.com/lhapaipai/mini-file-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhapaipai%2Fmini-file-manager/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260571177,"owners_count":23029838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-browser","file-manager","file-picker","file-upload","javascript"],"created_at":"2024-10-11T14:44:29.415Z","updated_at":"2025-06-18T14:35:34.754Z","avatar_url":"https://github.com/lhapaipai.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mini File Manager\n\nMini 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).\n\nMini File Manager is very flexible, you can :\n  - upload big files / resume uploads with [resumableJS](https://github.com/23/resumable.js/) integration.\n  - crop / resize / rotate image after their upload.\n  - custom easily the theme with CSS variables.\n  - localize the application.\n\n\u003c!-- You can see an example here : [**Live Demo**](https://mini-file-manager.pentatrion.com/) (TinyMCE integration / File Picker with form) --\u003e\n\n\u003cimg alt=\"Mini File Manager\" src=\"https://user-images.githubusercontent.com/1088155/128615403-2b41fbb4-dd4e-452e-b2c2-6926642bf146.jpg\"\u003e\n\n## Getting started\n\nif 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.\n\nif 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.\n\n## Dependances\n\nMini 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**.\n\ni18n integration, available in English and French or provide your own Translation file. PRs are welcome.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100\" src=\"https://raw.githubusercontent.com/lhapaipai/mini-file-manager/main/docs/symfony.svg\" alt=\"Symfony logo\"\u003e\n  \u003cimg width=\"100\" src=\"https://raw.githubusercontent.com/lhapaipai/mini-file-manager/main/docs/vue.svg\" alt=\"Vue logo\"\u003e\n\u003c/p\u003e\n\n- Symfony v5\n  - pentatrion/upload-bundle\n  - liip/imagine-bundle\n  - symfony/validator\n\n\n## Installation\n\n### BackEnd\n\nbefore 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).\n\n### FrontEnd\n\n```console\nnpm install mini-file-manager\n```\n\nCopy `dist/file-manager` directory from `node_modules/mini-file-manager` to your webroot directory. it contains icons for each file type.\n\nCopy `dist/style.css` directory from `node_modules/mini-file-manager` to your webroot `file-manager` directory. it contains your styles for buttons.\n\n#### with UMD / ES Modules\n\n`mini-file-manager.umd.js` provides `miniFileManager` global variable.\n\n```html\n\u003c!-- with UMD --\u003e\n\u003clink rel=\"stylesheet\" href=\"/dist/mini-file-manager.css\" /\u003e\n\u003cdiv id=\"file-manager\"\u003e\u003c/div\u003e\n\u003cscript src=\"/dist/mini-file-manager.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  let {\n    fileManager,\n    fileManagerModal,\n    textFormFilePicker,\n    entityFormFilePicker\n  } = miniFileManager;\n    // etc...\n\u003c/script\u003e\n```\n\nor\n\n```js\n// with bundler\nimport {\n    fileManager,\n    fileManagerModal,\n    textFormFilePicker,\n    entityFormFilePicker\n} from \"mini-file-manager\";\nimport \"mini-file-manager/dist/style.css\";\n```\n\n## Configuration\n\nMini File Manager export 4 functions\n\n```js\nfileManager(\n  \"#selector\",        // string | HTMLElement\n  fileManagerOptions  // FileManagerOptions\n);\n\nfileManagerModal(\n  fileManagerOptions, // FileManagerOptions\n  onSuccess,          // (selectedFiles: File[]) =\u003e void\n  onAbort             // () =\u003e void\n);\n\ntextFormFilePicker(\n  inputElt,             // string | HTMLElement\n  fileManagerOptions,   // FileManagerOptions\n  selection             // File[]\n)\n\nentityFormFilePicker(\n  \"#inputs-container\",  // string | HTMLElement\n  fileManagerOptions,   // FileManagerOptions\n  uploadedFiles         // File[]\n  onNewFormFiles        // callBack (File[]) =\u003e {}\n)\n```\n\n```ts\nconst options: FileManagerOptions = {\n  canEditImageSize: true,\n  canRenameFile: true,\n  \n  debug: false,\n  endPoint: \"http://url-to-backend.com/media-manager\",\n  entryPoints: [\n    {\n      label: \"Conversation\",\n      // base directory relative to origin\n      directory: \"projet/mon-projet\",\n      origin: \"private_uploads\",\n      // readOnly mode -\u003e can't upload/modify/rename/delete files\n      readOnly: false,\n      icon: \"fa-lock\",\n    },\n  ],\n\n  // only for textFormFilePicker and entityFormFilePicker\n  form: {\n    filter: \"small\",  // any filter defined in LiipImagineBundle\n    type: \"image\"     // \"image\" | \"file\"\n  }\n\n  // if you wants to filter files you can upload\n  fileUpload: {\n    maxFileSize: 500 * 1024 * 1024, // 500Mo\n    fileType: [\n      \"text/*\",\n      \"image/*\", // image/vnd.adobe.photoshop  image/x-xcf\n      \"video/*\",\n      \"audio/*\",\n      \"application/rtf\",\n      \"application/pdf\",\n      \"application/xml\",\n      \"application/zip\",\n      \"font/ttf\",\n      \"font/woff\",\n      \"font/woff2\",\n      \"application/vnd.oasis.opendocument.spreadsheet\", // libreoffice ods\n      \"application/vnd.oasis.opendocument.text\", // libreoffice odt\n      \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\", // docx\n      \"application/msword\", // doc\n      \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\", // xlsx\n      \"application/vnd.ms-excel\", // xls\n      \"application/json\",\n      \"application/illustrator\", // .ai\n    ]\n  },\n  \n  // if you wants to filter files you can select\n  // only for the modal \"openFileManager\"\n  fileValidation: {\n    mimeGroup: \"image\",\n    allowDir: false,\n    imageOptions: {\n      allowSvg: false,\n      width: 1200,\n      height: 900,\n      minWidth: 1200,\n      maxWidth: 800,\n      minHeight: 1200,\n      maxHeight: 800,\n      ratio: 0.66, // float number : width/height\n\n      // note : if you give a width and a height, the ratio is calculated\n      // and only the width and the ratio are used.\n    },\n  }\n\n  // displays the files contained in the folder in the filemanager\n  // (otherwise only the files imported into the current session will be visible)\n  indexes: true,\n\n  liipResolverPrefix: '/media/cache/resolve'\n\n  locale: \"en\", // \"en\" | \"fr\" | \"custom\"\n  localeData: {\n    // if \"custom\" write here your translations by referring to the file\n    // https://github.com/lhapaipai/mini-file-manager/blob/main/src/locales.js\n    apply: \"foo\",\n    cancel: \"bar\",\n    editAndSelect: \"baz\",\n    // ...\n  }\n\n  multiple: false,\n\n  // not needed with textFormFilePicker\n  // selection is retrieved from input value\n  originalSelection: [\"posts/autre/ign.jpg\"],\n\n  showValidationString: true,\n\n  themePrefix: 'penta',\n};\n\n\n```\n\n### Theme\n\nif you wants to define your own theme, you have 2 levels of customization.\n\n- you can define your own css vars following this file : `src/css/variables.scss`\n\n```css\n:root {\n  --primary-color500: #ffea66;\n  --border-radius: .25rem;\n}\n```\n\n- you can set the `themePrefix` option with custom class to redefine your buttons in depth.\n\n\n## Screenshots\n\n\u003cimg alt=\"Crop image\" src=\"https://user-images.githubusercontent.com/1088155/128615409-8ba709cf-dd51-40c8-a5f5-93aaacd98fe3.jpg\"\u003e\u003cbr\u003e\n\n### Mobile friendly\n\n\u003cimg alt=\"Mobile first\" style=\"border: 1px solid #aaa; margin-right: 10px;\" src=\"https://user-images.githubusercontent.com/1088155/128615401-10dca575-3beb-4cc2-885f-d80498d181d6.jpg\" width=\"400\"\u003e\u003cimg alt=\"Crop mobile first\" style=\"border: 1px solid #aaa;\" src=\"https://user-images.githubusercontent.com/1088155/128623126-8fdda390-fc3a-455e-a8ad-5f3ab9d7d2e1.jpg\" width=\"400\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhapaipai%2Fmini-file-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flhapaipai%2Fmini-file-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhapaipai%2Fmini-file-manager/lists"}