{"id":18761057,"url":"https://github.com/migliori/file-tree-browser","last_synced_at":"2025-04-13T03:31:20.923Z","repository":{"id":38287744,"uuid":"214834282","full_name":"migliori/file-tree-browser","owner":"migliori","description":"File Tree Generator recovers directories and files recursively from a main directory, shows the tree structure \u0026 allows to choose a file.","archived":false,"fork":false,"pushed_at":"2025-04-08T04:20:04.000Z","size":36212,"stargazers_count":41,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T05:23:46.510Z","etag":null,"topics":["file-manager","html","javascript","tree-structure","treeview"],"latest_commit_sha":null,"homepage":"https://www.file-tree-generator.miglisoft.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/migliori.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-10-13T14:25:36.000Z","updated_at":"2025-04-08T04:20:00.000Z","dependencies_parsed_at":"2023-01-24T00:46:36.918Z","dependency_job_id":"0fe53ba5-08d5-420b-afb3-b5ebc8de0208","html_url":"https://github.com/migliori/file-tree-browser","commit_stats":null,"previous_names":["migliori/file-tree","migliori/file-tree-browser"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Ffile-tree-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Ffile-tree-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Ffile-tree-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Ffile-tree-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/migliori","download_url":"https://codeload.github.com/migliori/file-tree-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248659640,"owners_count":21141152,"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-manager","html","javascript","tree-structure","treeview"],"created_at":"2024-11-07T18:14:50.589Z","updated_at":"2025-04-13T03:31:20.917Z","avatar_url":"https://github.com/migliori.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# File Tree Browser\n\n## Demo\n\n\u003chttps://www.file-tree-generator.miglisoft.com/\u003e\n\n[![File Tree Generator](file-tree-generator-preview.png)](https://www.file-tree-generator.miglisoft.com)\n\n## Table of contents\n\n* [Overview](#overview)\n* [Quick start](#quick-start)\n* [Options](#options)\n* [How to customize the HTML/ CSS](#how-to-customize-the-html-css)\n* [Connnectors](#connnectors)\n* [Contribute](#contribute)\n* [Versionning](#versionning)\n* [Authors](#authors)\n* [License](#license)\n\n## Overview\n\n**File Tree Browser** is a Javascript plugin built to **browse folders** and **select files**.\n\nIt retrieves directories and files recursively with Ajax from a main directory and displays the tree structure. You can browse and select, move files from folder to folder, do any stuff with the choosen file.\n\nFile Tree Browser is programmed in **Vanilla Javascript** (compiled TypeScript) and **doesn't require any dependency**.\n\na **PHP connector** is provided to retrieve the main directory content, you can write your own in any server language (NodeJS, ASP, ...).\n\nThe default template is built with Bootstrap 4, but Bootstrap is **not required** at all. You can easily **add your own HTML/CSS template** and change markup to fit your needs.\n\n## Installation\n\nClone / download or install with npm\n\n```bash\n  npm install @migliori/file-tree-browser@1.1.1\n```\n\n## Quick start\n\n* Upload the *dist* folder on your server\n* add the HTML markup on your page:\n\n```html\n\u003c!--\n    This is a minimal example.\n    You can change anything here,\n    The File Tree Browser requires only a main wrapper\n    with .ft-tree and .ft-explorer inside.\n--\u003e\n\u003cdiv id=\"custom-id\"\u003e\n    \u003cdiv class=\"ft-tree\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"ft-explorer\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n* add the Javascript code:\n\n```javascript\n\u003cscript src=\"dist/js/file-tree-browser.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", function(event) {\n\n        var options = {\n            mainDir: '/path/to/directory',\n            elementClick: function (filePath, fileName) {\n                // do anything you want\n            },\n            cancelBtnClick: function (filePath, fileName) {\n                // do anything you want\n            },\n            okBtnClick: function (filePath, fileName) {\n                // do anything you want\n            }\n        };\n\n        var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);\n    });\n\u003c/script\u003e\n```\n\n## Options\n\nName | type | Default Value | Description\n---- | ---- | ----- | -------\nconnector | string | 'php' | connector file extension in `dist/connectors/connector.[ext]`\ndragAndDrop | boolean | true | allow or disallow to drag files from folder to folder\nexplorerMode | string | 'list' | 'list' or 'grid'\nextensions | array | ['.*'] | Array with the authorized file extensions\nmainDir | string | 'demo-files' | main directory id\nmaxDeph | number | 3 | deph of the folders to browse from the main directory\ncancelBtn | boolean | true | add a cancel button or not\ncancelBtnText | string | 'Cancel' | text for the *Cancel* button\nokBtn | boolean | true | add an OK button or not\nokBtnText | string | 'Ok' | text for the *Ok* button\ntemplate | string | 'bootstrap4' | name of the HTML/CSS template files in *dist/templates/*\nelementClick | function | `function (filePath, fileName) {console.log(filePath);    console.log(fileName);}` | callback function called when the user clicks any file in the explorer\ncancelBtnClick | function | `function () { console.log('Cancel'); }` | callback function called when the user clicks the explorer *cancel* button\nokBtnClick | function | `function (filePath, fileName) {console.log(filePath);    console.log(fileName);}` | callback function called when the user clicks the explorer *OK* button\n\n## How to customize the HTML/ CSS\n\nThe template files are used to generate the File Explorer html code.\n\nThey are located in *dist/templates/*\n\n### To create your own templates\n\n* Create your HTML file + your css file with the same name for both in *dist/templates/*\n* Your HTML template **MUST**:\n  * include exactly the same *\u0026lt;template\u0026gt;* tags with the exact IDs as the default Bootstrap 4 template.\n  ie:\n\n    ```html\n    \u003ctemplate id=\"explorer-mode\"\u003e...\u003c/template\u003e\n    ```\n\n  * Each *\u0026lt;template\u0026gt;* tag MUST include elements having the prefixed CSS classes `ft-`\n\n* Load your template using the *template* option:\n\n    ```javascript\n    \u003cscript\u003e\n        document.addEventListener(\"DOMContentLoaded\", function(event) {\n\n            var options = {\n                // ...\n                template: 'your-custom-template'\n            };\n\n            var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);\n        });\n    \u003c/script\u003e\n    ```\n\nYou can use any HTML structure, any element, as long as the templates are all present with their respective IDs, and all the necessary prefixed classes are present in each of them.\n\n**WARNING**: if there's a missing *\u0026lt;template\u0026gt;* tag or a missing prefixed class, Javascript will throw the following console error:\n\n```javascript\n'Augh, there was an error!'\n```\n\n## Connnectors\n\nThe default connector is written in PHP.\nYou can write your own in any server language (nodeJs, ASP, ...). ie:\n\n* create your connector file named *dist/connectors.connector.asp*\n* Load it using the *connector* option:\n\n    ```javascript\n    \u003cscript\u003e\n        document.addEventListener(\"DOMContentLoaded\", function(event) {\n\n            var options = {\n                // ...\n                connector: 'asp'\n            };\n\n            var ft = new FileTreeBrowser('file-tree-browser-wrapper', options);\n        });\n    \u003c/script\u003e\n    ```\n\n## Contribute\n\nAny new connector or cool template is welcome!\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/migliori/file-tree-browser/tags).\n\n## Authors\n\n* **Gilles Migliori** - _Initial work_ - [Migliori](https://github.com/migliori)\n\n## License\n\nThis project is licensed under the GNU GENERAL PUBLIC LICENSE - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigliori%2Ffile-tree-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmigliori%2Ffile-tree-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigliori%2Ffile-tree-browser/lists"}