{"id":13402469,"url":"https://github.com/ctf0/Laravel-Media-Manager","last_synced_at":"2025-03-14T08:30:44.442Z","repository":{"id":22752399,"uuid":"97224578","full_name":"ctf0/Laravel-Media-Manager","owner":"ctf0","description":"A \"Vuejs \u0026 Laravel\" Media Manager With Tons of Features","archived":false,"fork":false,"pushed_at":"2024-03-01T17:50:20.000Z","size":2428,"stargazers_count":833,"open_issues_count":3,"forks_count":181,"subscribers_count":37,"default_branch":"master","last_synced_at":"2024-10-11T12:18:49.553Z","etag":null,"topics":["javascript","laravel","media-manager","php","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ctf0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ctf0"}},"created_at":"2017-07-14T10:56:15.000Z","updated_at":"2024-09-30T17:51:00.000Z","dependencies_parsed_at":"2024-01-14T03:45:58.066Z","dependency_job_id":"8e23403b-f35c-44a5-9108-2df30f475ae7","html_url":"https://github.com/ctf0/Laravel-Media-Manager","commit_stats":{"total_commits":285,"total_committers":12,"mean_commits":23.75,"dds":"0.32280701754385965","last_synced_commit":"caf85e4aa3c15eb9ac22675300ecfa57940dce9f"},"previous_names":[],"tags_count":105,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2FLaravel-Media-Manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2FLaravel-Media-Manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2FLaravel-Media-Manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2FLaravel-Media-Manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctf0","download_url":"https://codeload.github.com/ctf0/Laravel-Media-Manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547251,"owners_count":20308668,"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":["javascript","laravel","media-manager","php","vuejs"],"created_at":"2024-07-30T19:01:16.435Z","updated_at":"2025-03-14T08:30:44.008Z","avatar_url":"https://github.com/ctf0.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ctf0"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    Laravel Media Manager\n    \u003cbr\u003e\n    \u003ca href=\"https://packagist.org/packages/laravel/laravel\"\u003e\u003cimg src=\"https://img.shields.io/badge/Laravel-v7+-red\" alt=\"Browser Status\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/ctf0/media-manager\"\u003e\u003cimg src=\"https://img.shields.io/packagist/v/ctf0/media-manager.svg\" alt=\"Latest Stable Version\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/ctf0/media-manager\"\u003e\u003cimg src=\"https://img.shields.io/packagist/dt/ctf0/media-manager.svg\" alt=\"Total Downloads\"/\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"https://badges.herokuapp.com/browsers?firefox=61\u0026amp;microsoftedge=17\u0026amp;googlechrome=51\u0026amp;safari=10\u0026amp;iexplore=!?\" alt=\"Browser Status\"/\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"main\" src=\"https://user-images.githubusercontent.com/7388088/70385131-c0937e80-1993-11ea-9513-cb5c90f4281b.png\"/\u003e\n    \u003cimg alt=\"card\" src=\"https://user-images.githubusercontent.com/7388088/75881844-8fa6d680-5e28-11ea-8a38-09bbce94d68e.png\"/\u003e\n\u003c/p\u003e\n\n- [Installation](#Installation)\n- [Config](#Config)\n- [Features](#Features)\n- [Events](#Events)\n- [Usage](#Usage)\n\n\u003cbr\u003e\n\n## Installation\n\n- `composer require ctf0/media-manager`\n\n- publish the package assets with\n\n    `php artisan vendor:publish --provider=\"ctf0\\MediaManager\\MediaManagerServiceProvider\"`\n\n- after installation, run `php artisan lmm:setup` to add\n    + package routes to `routes/web.php`\n    + package assets compiling to `webpack.mix.js`\n\n- for [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-\u0026-Folder) item/s we use a db \"sqlite\" but if you prefer to use something else you should run the migration\n\n    ```bash\n    php artisan migrate\n    ```\n\n- [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)\n\n    ```bash\n    yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang\n    yarn add buffer process --dev\n    ```\n\n- add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.\n    + if you are having issues [Check](https://ctf0.wordpress.com/2017/09/12/laravel-mix-es6/).\n    + also check [mix v6 notes](https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6)\n\n    ```js\n    // app.js\n\n    // mix v5\n    window.Vue = require('vue')\n\n    // mix v6\n    import Vue from 'vue'\n\n    require('../assets/vendor/MediaManager/js/manager')\n\n    new Vue({\n        el: '#app'\n    })\n    ```\n\n\u003cbr\u003e\n\n## Config\n\n- [**config/mediaManager.php**](./src/config/mediaManager.php)\n\n\u003cbr\u003e\n\n## Features\n\n- [image editor](https://github.com/ctf0/Laravel-Media-Manager/wiki/Image-Editor)\n- multi\n    + upload\n    + move/copy\n    + delete\n- upload by either\n    + using the upload panel\n    + drag \u0026 drop anywhere\n    + click \u0026 hold on an empty area **\"items container\"**\n    + from a url **\"images only\"**\n- [preview files before uploading](https://github.com/ctf0/Laravel-Media-Manager/wiki/Preview-Files-Before-Uploading)\n- toggle between `random/original` names for uploaded files\n- [asynchronous Updates](https://github.com/ctf0/Laravel-Media-Manager/wiki/Async-Update-The-Manager)\n- bulk selection\n- bookmark visited directories for quicker navigation\n- change item/s visibility\n- update the page url on navigation\n- show audio files info **\"artist, album, year, etc..\"**\n- dynamically hide [files](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Files-With-Extension) / [folders](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Folders)\n- [restrict access to path](https://github.com/ctf0/Laravel-Media-Manager/wiki/Restrict-Access-To-Path)\n- download selected [\"including bulk selection\"](https://github.com/ctf0/Laravel-Media-Manager/wiki/Download-Files-as-a-ZipFile)\n- directly copy selected file link\n- use the manager\n    + [from modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal)\n    + [with any wysiwyg editor](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-With-Any-WYSIWYG-Editor)\n- auto scroll to selected item using **\"left, up, right, down, home, end\"**\n- [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-\u0026-Folder) item/s.\n- search in the current directory **or** globally through the entire collection.\n- filter by\n    + folder\n    + image\n    + audio\n    + video\n    + text/pdf\n    + application/archive\n    + locked items\n    + selected items\n- sort by\n    + name\n    + size\n    + last modified\n- items count for\n    + all\n    + selected\n    + search found\n- contents ratio bar\n- protection against overwriting (files/folders)\n- file name sanitization for\n    + upload\n    + rename\n    + new folder\n- disable/enable buttons depend on the usage to avoid noise \u0026 keep the user focused\n- shortcuts / gestures\n    + if no more **rows** available, pressing `down` will go to the last item in the list **\"same as native file manager\"**.\n    + when viewing a `audio/video` file in the preview card, pressing `space` will **play/pause** the item instead of closing the modal.\n    + dbl click/tap\n        + any file of type `audio/video` when sidebar is hidden, will open it in the preview card **\"same as images\"**.\n        + any file of type `application/archive` will download it.\n    + all the **left/right** gestures have their counterparts available as well.\n    + pressing `esc` while using the ***image editor*** wont close the modal but you can ***dbl click/tap*** the `modal background` to do so. **\"to avoid accidentally canceling your changes\"**.\n\n\u003e\\- the info sidebar is only available on big screens **\"\u003e 1023px\"**.\u003cbr\u003e\n\u003e\\- to stop interfering with other `keydown` events you can toggle the manager listener through\u003cbr\u003e\n\u003e`EventHub.fire('disable-global-keys', true/false)`.\n\n\u003cbr\u003e\n\n| navigation           | button                                              | keyboard         | click / tap                  | touch                           |\n| -------------------- | --------------------------------------------------- | ---------------- | ---------------------------- | ------------------------------- |\n|                      | toggle upload panel *(toolbar)*                     | u                |                              |                                 |\n|                      | refresh *(toolbar)*                                 | r                | hold *\"clear cache\"*         | pinch in *(items container)*    |\n|                      | [move/show movable list][movable] *(toolbar)*       | m / p            |                              |                                 |\n|                      | image editor *(toolbar)*                            | e                |                              |                                 |\n|                      | delete *(toolbar)*                                  | d / del          |                              |                                 |\n|                      | lock/unlock *(toolbar)*                             | l                | hold *\"anything but images\"* |                                 |\n|                      | change visibility *(toolbar)*                       | v                |                              |                                 |\n|                      | toggle bulk selection *(toolbar)*                   | b                |                              |                                 |\n|                      | (reset) bulk select all *(toolbar)*                 | a                |                              |                                 |\n|                      | add to movable list *(shopping cart)*               | c / x            | *                            |                                 |\n|                      | [move/show movable list][movable] *(shopping cart)* |                  | **                           |                                 |\n|                      | clear movable list *(shopping cart)*                |                  | hold                         |                                 |\n|                      | toggle sidebar *(path bar)*                         | t                | *                            | swipe left/right *(sidebar)*    |\n|                      | confirm *(modal)*                                   | enter            |                              |                                 |\n|                      | toggle preview image/pdf/text *(item)*              | space            | **                           |                                 |\n|                      | play/pause media *(item)*                           | space            | **                           |                                 |\n|                      | hide (modal / upload-panel)                         | esc              |                              |                                 |\n|                      | reset (search / bulk selection / filter / sorting)  | esc              |                              |                                 |\n|                      | reset upload [showPreview][showPreview]             | esc              |                              |                                 |\n|                      | confirm upload [showPreview][showPreview]           | enter            |                              |                                 |\n|                      | \u0026nbsp;                                              |                  |                              |                                 |\n|                      | add to movable list *(item)*                        |                  |                              | swipe up                        |\n|                      | delete *(item)*                                     |                  |                              | swipe down                      |\n|                      | rename *(item)*                                     |                  |                              | swipe left                      |\n|                      | image editor *(item)*                               |                  | hold                         |                                 |\n|                      | current ++ selected *(item)*                        | shift + click    |                              |                                 |\n|                      | current + selected *(item)*                         | alt/meta + click |                              |                                 |\n|                      | create new folder                                   |                  | ** *(items container)*       |                                 |\n|                      | \u0026nbsp;                                              |                  |                              |                                 |\n| go to next *\"item\"*  |                                                     | right            | *                            | swipe left  *(preview)*         |\n| go to prev *\"item\"*  |                                                     | left             | *                            | swipe right *(preview)*         |\n| go to first *\"item\"* |                                                     | home             |                              |                                 |\n| go to last *\"item\"*  |                                                     | end              |                              |                                 |\n| go to next *\"row\"*   |                                                     | down             |                              | swipe up *(preview)*            |\n| go to prev *\"row\"*   |                                                     | up               |                              | swipe down *(preview)*          |\n| open folder          |                                                     | enter            | **                           |                                 |\n| go to prev *\"dir\"*   | folderName *(path bar)*                             | backspace        | *                            | swipe right *(items container)* |\n\n\u003cbr\u003e\n\n## Events\n\n| type            | event-name                                         | description                                                                |\n| --------------- | -------------------------------------------------- | -------------------------------------------------------------------------- |\n| [JS][js]        |                                                    |                                                                            |\n|                 | modal-show                                         | when modal is shown                                                        |\n|                 | modal-hide                                         | when modal is hidden                                                       |\n|                 | file_selected *([when inside modal][modal])*       | get selected file url                                                      |\n|                 | multi_file_selected *([when inside modal][modal])* | get bulk selected files urls                                               |\n|                 | folder_selected *([when inside modal][modal])*     | get selected folder path                                                   |\n| [Laravel][lara] |                                                    |                                                                            |\n|                 | MMFileUploaded($file_path, $mime_type, $options)   | get uploaded file storage path, mime type, [custom options][customOptions] |\n|                 | [MMFileSaved][event]($file_path, $mime_type)       | get saved (edited/link) image full storage path, mime type                 |\n|                 | MMFileDeleted($file_path, $is_folder)              | get deleted file/folder storage path, if removed item is a folder          |\n|                 | MMFileRenamed($old_path, $new_path)                | get renamed file/folder \"old \u0026 new\" storage path                           |\n|                 | MMFileMoved($old_path, $new_path)                  | get moved file/folder \"old \u0026 new\" storage path                             |\n\n[js]: https://github.com/gocanto/vuemit\n[lara]: https://laravel.com/docs/master/events#manually-registering-events\n[event]: https://github.com/ctf0/Laravel-Media-Manager/wiki/Image-Editor#optimize-edited-images-on-save\n[modal]: https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal\n[showPreview]: https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/config/mediaManager.php#L126\n[customOptions]: https://github.com/ctf0/Laravel-Media-Manager/wiki/Preview-Files-Before-Uploading#-send-custom-options-with-uploaded-files\n[movable]: https://github.com/ctf0/Laravel-Media-Manager/wiki/Movable-List\n\n\u003cbr\u003e\n\n## Usage\n\n\u003e [Wiki](https://github.com/ctf0/Laravel-Media-Manager/wiki)\u003cbr\u003e\n\u003e [Demo](https://github.com/ctf0/demos/tree/media-manager)\n\n- visit `localhost:8000/media`\n\n\u003cbr\u003e\n\n### Security\n\nIf you discover any security-related issues, please email [ctf0-dev@protonmail.com](mailto:ctf0-dev@protonmail.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2FLaravel-Media-Manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctf0%2FLaravel-Media-Manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2FLaravel-Media-Manager/lists"}