{"id":20754480,"url":"https://github.com/annotationsro/ng6-file-man","last_synced_at":"2025-04-07T19:16:12.320Z","repository":{"id":57239362,"uuid":"145110658","full_name":"AnnotationSro/ng6-file-man","owner":"AnnotationSro","description":"Angular File Manager","archived":false,"fork":false,"pushed_at":"2024-10-28T16:58:23.000Z","size":2063,"stargazers_count":26,"open_issues_count":5,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T17:18:42.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/AnnotationSro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2018-08-17T11:08:39.000Z","updated_at":"2025-02-08T04:27:26.000Z","dependencies_parsed_at":"2023-11-08T11:42:17.460Z","dependency_job_id":"51a3b6e3-99f2-45b5-a94b-21edb2901c6d","html_url":"https://github.com/AnnotationSro/ng6-file-man","commit_stats":{"total_commits":218,"total_committers":5,"mean_commits":43.6,"dds":"0.21100917431192656","last_synced_commit":"8e521969cee7984e025446655d987ebe5d2ba463"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fng6-file-man","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fng6-file-man/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fng6-file-man/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fng6-file-man/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnnotationSro","download_url":"https://codeload.github.com/AnnotationSro/ng6-file-man/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":[],"created_at":"2024-11-17T09:17:58.215Z","updated_at":"2025-04-07T19:16:12.268Z","avatar_url":"https://github.com/AnnotationSro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FileMan\n\nAngular File Manager library.\n\n## Table of contents\n* [Features](#features)\n* [Installing](#installing)\n* [Backend requirements](#backend)\n* [Ouputs](#outputs)\n* [Inputs](#inputs)\n* [SASS theming](#sass)\n* [Customizing](#customizing)\n* [Preview](#preview)\n* [i18n](#i18n)\n\n## Features\n\n* themeable\n* i18n support\n* upload (/w drag'n drop)\n* customizable parts\n* FileManager as button popup\n\n## Installing\n\n#### Prerequisities\n* Downloaded and added `fontawesome@^5.1.1`\n\n##### Downloading npm package\nInstall ng6-file-man\n\n```\nnpm install ng6-file-man\n-- OR --\nyarn add ng6-file-man\n```\n\n##### Adding styles\nIn `angular.json` add to `styles`\n````\n\"node_modules/ng6-file-man/assets/ng6-file-man-styles.scss\",\n````\n\nOr use SASS in your project \n````\n//globalStyles.scss\n\n@import \"~ng6-file-man/assets/ng6-file-man-styles.scss\";\n````\n\n##### Using in app\n\nAdd module\n````\n// app.module.ts\n\nimport {FileManagerModule} from 'ng6-file-man';\n...\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    FileManagerModule,\n    ...\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n````\n\nCreate `config in constructor`\n````\n// app.component.ts\n  \nconst treeConfig: ConfigInterface = {\n  baseURL: 'http://localhost:8080/',\n  api: {\n    listFile: 'api/file/list',\n    uploadFile: 'api/file/upload',\n    downloadFile: 'api/file/download',\n    deleteFile: 'api/file/remove',\n    createFolder: 'api/file/directory',\n    renameFile: 'api/file/rename',\n    searchFiles: 'api/file/search'\n  },\n  options: {\n    allowFolderDownload: DownloadModeEnum.DOWNLOAD_FILES, //alternatively DOWNLOAD_DISABLED,DOWNLOAD_ALL\n    showFilesInsideTree: false,\n    openFolderOnDoubleClick: true,\n    showFolderOptions: false\n  }\n};\n````\n\nThen save your TreeConfig and create new TreeModel\n````\n// app.component.ts\n  \nthis.tree = new TreeModel(treeConfig)\n````\n\nFinaly, add it into html\n````\n\u003cfm-file-manager [tree]=\"tree\"\u003e\u003c/fm-file-manager\u003e\n````\n\n## Backend\n\n**UPDATE:** Express API availible at https://github.com/Chiff/ng6-file-man-express\n\n#### List files / folders\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* Get\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* parentPath (e.g. `localhost:8080/api/file/list?parentPath=/folder1/folder2`)\n\n\u003cstrong\u003eWe are expecting response \u003c/strong\u003e\n* Array of nodes with:\n````\n{\n  size: string           // e.g. '3 KB'\n  url?: string            // download url\n  id: string | number;   // id can be path or database id\n  dir: bool              // is current node dir?\n  path: string           // path to current item (e.g. /folder1/someFile.txt)\n  name?: string          // optional (but we are using id as name if name is not present) (e.g. someFile.txt)\n}\n````\n\n#### Upload \nThis request is in form for [Fine Uploader traditional server](https://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html)\n\n\u003cstrong\u003eParams\u003c/strong\u003e\n* qqfile: MultipartFile[]\n* qquuid: String\n* qqfilename: String\n* qqpartindex: int\n* qqtotalparts: int\n* qqtotalfilesize: long\n* parentPath: String\n\n#### Download\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* Get\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* path (e.g. `localhost:8080/api/file/download?path=/folder1/someFile.txt`)\n\n#### Create directory\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* POST\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* dirName \n* parentPath \n\n(e.g. `localhost:8080/api/file/directory?parentPath=/folder1\u0026dirName=newDir`)\n\n#### Remove file / folder\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* DELETE\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* path \n\n(e.g. `localhost:8080/api/file/remove?path=/folder1/newDir`)\n\n#### Rename file / folder\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* POST\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* path \n* newName \n\n(e.g. `localhost:8080/api/file/rename?path=/folder1/newDir\u0026newName=newDirName`)\n\n#### Search\n\n\u003cstrong\u003eMethod\u003c/strong\u003e\n* GET\n\n\u003cstrong\u003eParameters we are sending\u003c/strong\u003e\n* query \n\n(e.g. `localhost:8080/api/file/search?query=searchTerm`)\n\n\u003cstrong\u003eWe are expecting response\u003c/strong\u003e\n* Array of nodes with:\n````\n{\n  size: string           // e.g. '3 KB'\n  url?: string            // download url\n  id: string | number;   // id can be path or database id\n  dir: bool              // is current node dir?\n  path: string           // path to current item (e.g. /folder1/someFile.txt)\n  name?: string          // optional (but we are using id as name if name is not present) (e.g. someFile.txt)\n}\n````\n\n\n## Outputs\n````\n\u003cfm-file-manager (itemClicked)=\"itemClicked($event)\" ... \u003e\u003c/fm-file-manager\u003e\n````\n\n\u003cstrong\u003eEvent Types\u003c/strong\u003e\n\u003csmall\u003e\n* select\n* download\n* rename\n* remove\n\u003c/small\u003e\n\nEvery event has `node` property\n\n## Inputs\n\nname | type        | required | default value\n--- |-------------|----------| ---\ntree | TreeModel   | true     | -\nwhiteList | string[]    | false    | null\nisPopup | bool        | false    | false\nallowRename | bool        | false    | false\nlanguage | string      | false    | 'en'\niconTemplate | TemplateRef | false    | -\nfolderContentTemplate | TemplateRef | false    | -\nfolderContentBackTemplate | TemplateRef | false    | -\nfolderContentNewTemplate | TemplateRef | false    | -\nsideViewTemplate | TemplateRef | false    | -\nloadingOverlayTemplate | TemplateRef | false    | -\n\n## SASS\n\n#### Prerequisites\n* Global SASS file included in angular.json\n\n#### file-manager-styles.scss `!default` variables\n*  $main-color\n*  $contrast-color\n*  $text-color\n*  $border-radius\n*  $hasAnimations\n\n#### Usage\n````\n//globalStyles.scss\n\n$main-color: #626e80;\n$text-color: black;\n$contrast-color: white;\n$hasAnimations: false;\n$border-radius: 20px;\n\n@import \"~ng6-file-man/assets/ng6-file-man-styles.scss\";\n````\n\n## Customizing\n````\n\u003cfm-file-manager [iconTemplate]=\"iconTemplate\" ... \u003e\u003c/fm-file-manager\u003e\n\n\u003c!-- #iconTemplate is required, let-node is reference to node--\u003e\n\u003cng-template let-node #iconTemplate\u003e\n  \u003ci class=\"fas fa-arrow-alt-circle-right\" style=\"padding: 5px\"\u003e\u003c/i\u003e\n  {{node.name}}\n\u003c/ng-template\u003e\n````\n\nExplanation\n\nTemplate Name | Template input |  Input Type |Template Function\n--- | --- | --- | ---\niconTemplate | let-node | NodeInterface | Tree view node template\nfolderContentTemplate | let-node | NodeInterface | Folder content node template\nfolderContentBackTemplate | let-node | NodeInterface | Back button in folder content\nfolderContentNewTemplate | let-node | NodeInterface | New button in folder content\nsideViewTemplate | let-node | NodeInterface | Data  inside side view\nloadingOverlayTemplate | let-timeoutMessage | string | loading overlay screen\n\n#### Component layout\n\n````\n|--------------------------------------------------|\n| Nav Bar                                   Search |\n|--------------------------------------------------|\n|              |                   |               |\n|              |                   |               |\n|     Tree     |      Folder       |      Side     |\n|     View     |      Content      |      View     |\n|              |                   |               |\n|              |                   |               |\n|--------------------------------------------------|\n````\n\n\n## Preview\n\n#### By default, this is what component looks like (+ selected folder)\n![non customized default view + opened info popup](images/default_plus_right_popup.png)\n\n#### Example of customization and theming\n![customized default view + opened info popup](images/default_plus_right_popup_custom_layout.png)\n\n#### File upload\n![File upload](images/upload.png)\n\n*Note: in pictures above there are no translations availible, words will be translated after \\[lang\\].json is filled*\n\n## i18n\n* Copy `i18n` file from `~node_modules/ng6-file-man/assets`\n* Put it in `~src/assets/i18n/[language].json` (e.g. `~src/assets/i18n/fr.json`) \n* Fill empty strings with your translations (e.g. `\"Download\": \"Télécharger\"`)\n* Set language property `\u003cfm-file-manager [language]=\"'fr'\" ... \u003e\u003c/fm-file-manager\u003e`\n* Voilà...\n\n## Built With\n\n* [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.\n* [ng-packagr](https://github.com/dherges/ng-packagr)\n\n### Build instructions\n1. Change package version\n3. gulp prod\n4. cd ../file-manager-lib\n5. npm publish\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n\u003c!--\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). \n--\u003e\n\n## Authors\n\n* **Martin Filo** - *Initial work* - [Chiff](https://github.com/Chiff)\n* **Igor Kvasnicka** - improvements and fine tuning\n\nSee also the list of [contributors](https://github.com/AnnotationSro/ng6-file-man/contributors)\n who participated in this project. \n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Repository\n* Playground: https://github.com/Chiff/ng6-file-man-test \\[outdated\\]\n* Simple Express API: https://github.com/Chiff/ng6-file-man-express\n\n## Version\n\nng6-file-name | angular \n--- |-------------\n4.0.0 | 14.3.0 \n5.0.0 | 15.2.8 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannotationsro%2Fng6-file-man","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannotationsro%2Fng6-file-man","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannotationsro%2Fng6-file-man/lists"}