{"id":19951319,"url":"https://github.com/benpptung/file-button-react","last_synced_at":"2026-05-19T07:32:14.760Z","repository":{"id":57235364,"uuid":"91559816","full_name":"benpptung/file-button-react","owner":"benpptung","description":null,"archived":false,"fork":false,"pushed_at":"2018-03-13T07:58:36.000Z","size":151,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-08T07:51:45.522Z","etag":null,"topics":["react","react-component","react-component-wrapper"],"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/benpptung.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":"2017-05-17T09:37:49.000Z","updated_at":"2019-06-23T22:37:06.000Z","dependencies_parsed_at":"2022-09-04T21:40:48.941Z","dependency_job_id":null,"html_url":"https://github.com/benpptung/file-button-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/benpptung/file-button-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benpptung%2Ffile-button-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benpptung%2Ffile-button-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benpptung%2Ffile-button-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benpptung%2Ffile-button-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benpptung","download_url":"https://codeload.github.com/benpptung/file-button-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benpptung%2Ffile-button-react/sbom","scorecard":{"id":233592,"data":{"date":"2025-08-11","repo":{"name":"github.com/benpptung/file-button-react","commit":"55220bf0f2df66d221b18fcceb46836cbfce25fb"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/14 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}}]},"last_synced_at":"2025-08-17T05:14:01.687Z","repository_id":57235364,"created_at":"2025-08-17T05:14:01.687Z","updated_at":"2025-08-17T05:14:01.687Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33206320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T07:16:55.748Z","status":"ssl_error","status_checked_at":"2026-05-19T07:16:54.366Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","react-component","react-component-wrapper"],"created_at":"2024-11-13T01:07:38.284Z","updated_at":"2026-05-19T07:32:14.739Z","avatar_url":"https://github.com/benpptung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Another implementation of [file-button](https://www.npmjs.com/package/file-button).\nA [HOC](https://facebook.github.io/react/docs/higher-order-components.html) for reusing component as a `file input button`. There is no limitation the wrapped component is third party component or created by ourselves.\n\n# Example\n\nwrap [material-ui](http://www.material-ui.com)'s [RaisedButton](http://www.material-ui.com/#/components/raised-button)\n```\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default;\nconst request = require('superagent');\n\n\nconst wrap = require('file-button-react');\nconst RaisedButton = require('material-ui/RaisedButton').default;\n\n\nvar mountnode = document.getElementById('mountnode');\nif (mountnode) {\n\n  let opt = { depth: 1 };\n  let FileButton = wrap(RaisedButton, opt);\n  \n  ReactDOM.render(\n    \u003cMuiThemeProvider\u003e\n      \u003cFileButton label=\"upload\" primary={true} onFileInput={upload} /\u003e\n      \u003cRaisedButton label=\"catch me\" secondary={true} style={wrap.styl} /\u003e\n      \u003cRaisedButton label=\"catch me too\" secondary={true} style={wrap.styl} /\u003e\n    \u003c/MuiThemeProvider\u003e,\n    mountnode\n  )\n}\n\nfunction upload(fileinput) {\n  var req = request.post('/upload/');\n  var files = fileinput.files;\n    \n  for(let i = 0, len = files.length; i \u003c len; ++i){\n    let file = files[i];\n    req.attach('ajaxfile-' + i, file, file.name);\n  }\n    \n  req\n    .on('progress', function(e){\n      \n      if (e.lengthComputable) {\n        // handle progress bar here\n      }\n    })\n    .end(function(err, res) {\n      \n      if (res.ok) {     \n        // handle successful result here\n      }\n    });\n}\n```\n\n# API\n\n## wrap(ReactComponent, options)\n\nThis function returns a ReactComponet with two additional properties \n\n`options` is same as [file-button](https://www.npmjs.com/package/file-button) module with the following additional option.\n\n##### depth: {Unsigned Integer}\n\ndefaults to `0`.\n \n`file-button-react` injects DOM element `\u003cinput type=\"file\" /\u003e` to React component, which we cannot control. This is useful if we want to re-use third-party component, although it is discouraged. So, sometimes it may fail depends on the component. In that case, we can increase `depth` value to append `\u003cinput type=\"file\" /\u003e` to child node's child node...\n\n\n## properties\n\nAll properties are sent to the wrapped component except `onFileInput`.\n\n##### onFileInput: {function}\n\nrecieve `\u003cinput type=\"file\" /\u003e`\n\n##### diabled: {Boolean}\n\ndefault to `false`\nThe wrapped component will recieve this prop, so it can re-style itself as `disabled`.\n\n## wrap.styl: {position:'relative', overflow:'hidden'}\n\nA React style object, which is the style applied to the root DOM. If layout got problem after using this component, can try to apply this style to other buttons like this example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenpptung%2Ffile-button-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenpptung%2Ffile-button-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenpptung%2Ffile-button-react/lists"}