{"id":19787543,"url":"https://github.com/themexpert/react-filemanager","last_synced_at":"2025-04-30T23:33:43.197Z","repository":{"id":55032505,"uuid":"119344563","full_name":"themexpert/react-filemanager","owner":"themexpert","description":null,"archived":false,"fork":false,"pushed_at":"2021-01-14T07:26:13.000Z","size":252,"stargazers_count":7,"open_issues_count":1,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-24T16:38:15.002Z","etag":null,"topics":["filesystem","image-processing","javascript","mediamanager","react","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themexpert.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-29T07:00:09.000Z","updated_at":"2023-08-20T20:56:38.000Z","dependencies_parsed_at":"2022-08-14T09:40:34.657Z","dependency_job_id":null,"html_url":"https://github.com/themexpert/react-filemanager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Freact-filemanager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Freact-filemanager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Freact-filemanager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Freact-filemanager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themexpert","download_url":"https://codeload.github.com/themexpert/react-filemanager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224227475,"owners_count":17276805,"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":["filesystem","image-processing","javascript","mediamanager","react","reactjs"],"created_at":"2024-11-12T06:23:35.057Z","updated_at":"2024-11-12T06:23:35.664Z","avatar_url":"https://github.com/themexpert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cspan color=\"red\"\u003eABANDONED!\u003c/span\u003e\nYou can still fork this repository, workout the missing dependencies and extend or/and you can check out [the new file manager](https://github.com/reactfilemanager) we are working on.\n\n\nReact based file and media manager developed for [Quix Page Builder](https://www.themexpert.com/quix-pagebuilder) and open sourced by [ThemeXpert](https://www.themexpert.com) team.\n\n## Dependency\nWe've written a PHP library to handle all server side things. You need to include this to your project using composer. More information https://github.com/themexpert/react-filemanager-server\n\n## Usage\n\n`yarn add @themexpert/react-filemanager`\n\n`npm -i @themexpert/react-filemanager`\n\nWebpack rules\n```JS\n\n        module: {\n            rules: [\n                {\n                    test: /\\.jsx?$/,\n                    loader: 'babel?stage=0',\n                    include: [].concat(your_project_dirs, [fs.realpathSync(path.resolve(__dirname, './node_modules/@themexpert/react-filemanager/'))])\n                }\n\n            ]\n        }\n ```\n\n```JS\nimport initFM from 'react-filemanager';\n\nconst openFileManager = initFM('server_endpoint');\n// or\nconst openFileManager = initFM('server_endpoint', DOMElement);\n```\n\nThe returned callback `openFileManager` accepts a `callback` as first parameter to show the file manager modal and an object config as second parameter.\n\nIn this way, you won't have to instantiate FileManager seperately for different config\n\n```html\n\nconst config  = {\n                    //add filters, valid filters are [icon,image,video,dir]\n                    //currently filters only filters the plugins, not the items\n                    filters: \"image,icon\",\n\n                    //add additional http get/post parameters\n                    http_params: {\n                        foo: \"bar\"\n                    },\n\n                    //add additional headers\n                    headers: {\n                        foo: \"bar\"\n                    }\n                };\n\n\u003cbutton onclick=\"openFileManager(fileSelectCallback, config)\"\u003eOpen File Manager\u003c/button\u003e \n```\n```JS\nfunction fileSelectCallback(selection) {\n    console.log(selection);\n    return true; //close the modal\n}\n```\n\n\nIt's a good idea to make a wrapper to instantiate the file manager and the using it elsewhere\n\nFile: `wrapper.js`\n\nContent: \n```JS\nimport initFM from 'react-filemanager'\n\nexport default initFM('server-endpoint');\n```\n\nUse the wrapper in any React component\n\n```JS\nimport React, {Component} from 'react'\nimport openFileManager from './wrapper' //wherever it is\n\nconst config  = {\n                    //add filters, valid filters are [icon,image,video,dir]\n                    filters: \"image,icon\",\n\n                    //add additional http get/post parameters\n                    http_params: {\n                        foo: \"bar\"\n                    },\n\n                    //add additional headers\n                    headers: {\n                        foo: \"bar\"\n                    }\n                };\n\nexport default class FilePicker extends Component {\n    constructor(props) {\n        super(props);\n    }\n    \n    onFileSelect = selection =\u003e {\n    \n        console.log(selection);\n        \n        return true; //closes the file manager modal\n    };\n    \n    render = () =\u003e {\n        return (\n            \u003cbutton onClick={openFileManager(this.onFileSelect, config)}\u003ePick File\u003c/button\u003e\n        );\n    };\n}\n\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemexpert%2Freact-filemanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemexpert%2Freact-filemanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemexpert%2Freact-filemanager/lists"}