{"id":25875671,"url":"https://github.com/lenage/react-qiniu","last_synced_at":"2025-03-02T10:19:36.225Z","repository":{"id":34188357,"uuid":"38041191","full_name":"lenage/react-qiniu","owner":"lenage","description":"A React Component to upload file to Qiniu","archived":false,"fork":false,"pushed_at":"2019-10-29T14:34:24.000Z","size":619,"stargazers_count":107,"open_issues_count":11,"forks_count":52,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-24T02:34:47.417Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lenage.com/react-qiniu/","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/lenage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-25T09:44:42.000Z","updated_at":"2022-03-03T14:44:02.000Z","dependencies_parsed_at":"2022-09-03T23:31:58.637Z","dependency_job_id":null,"html_url":"https://github.com/lenage/react-qiniu","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenage%2Freact-qiniu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenage%2Freact-qiniu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenage%2Freact-qiniu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenage%2Freact-qiniu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenage","download_url":"https://codeload.github.com/lenage/react-qiniu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241488605,"owners_count":19970908,"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":"2025-03-02T10:19:35.205Z","updated_at":"2025-03-02T10:19:36.216Z","avatar_url":"https://github.com/lenage.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-qiniu\n\nReact Component to upload file to [Qiniu](http://www.qiniu.com/)\n\nSee Demo: http://lenage.com/react-qiniu/\n\n## Usage\n\nJust `require('react-qiniu')` and specify an `onDrop` method that accepts an array of dropped files and pass your Qiniu `token` as prop.\n\nYou can also specify a style object to apply to the Drop Zone.\nOptionally pass in a size property to configure the size of the Drop Zone.\n\n```jsx\nvar React = require('react');\nvar Qiniu = require('react-qiniu');\n\nvar ReactQiniuDemo = React.createClass({\n    getInitialState: function () {\n        return {\n            files: [],\n            token: 'YOUR_UPLOAD_TOKEN',\n            uploadKey: 'YOUR_CUSTOM_UPLOAD_KEY', // Optional\n            prefix: 'YOUR_QINIU_KEY_PREFIX' // Optional\n        };\n    },\n\n    onUpload: function (files) {\n        // set onprogress function before uploading\n        files.map(function (f) {\n            f.onprogress = function(e) {\n                console.log(e.percent);\n                };\n        });\n    },\n\n    onDrop: function (files) {\n        this.setState({\n            files: files\n        });\n        // files is a FileList(https://developer.mozilla.org/en/docs/Web/API/FileList) Object\n        // and with each file, we attached two functions to handle upload progress and result\n        // file.request =\u003e return super-agent uploading file request\n        // file.uploadPromise =\u003e return a Promise to handle uploading status(what you can do when upload failed)\n        // `react-qiniu` using bluebird, check bluebird API https://github.com/petkaantonov/bluebird/blob/master/API.md\n        // see more example in example/app.js\n      console.log('Received files: ', files);\n    },\n\n    render: function () {\n      return (\n          \u003cdiv\u003e\n            \u003cQiniu onDrop={this.onDrop} size={150} token={this.state.token} uploadKey={this.state.uploadKey} onUpload={this.onUpload}\u003e\n              \u003cdiv\u003eTry dropping some files here, or click to select files to upload.\u003c/div\u003e\n            \u003c/Qiniu\u003e\n          \u003c/div\u003e\n      );\n    }\n});\n\nReact.render(\u003cReactQiniuDemo /\u003e, document.body);\n```\n\nwhen upload, we will add a `promise` to file object, see [index.js](https://github.com/lenage/react-qiniu/blob/master/index.js#L68),\nso, you can deal with this promise to handle upload status. (do something when success/failure)\n\nsee more in [example/app.js](https://github.com/lenage/react-qiniu/blob/master/example/app.js)\n\n## Contributing\n\n1. Fork it ( https://github.com/lingochamp/react-qiniu/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## Thanks\n\n[@paramaggarwal](https://github.com/paramaggarwal/react-dropzone)\n[@mingxinstar](https://github.com/mingxinstar)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenage%2Freact-qiniu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flenage%2Freact-qiniu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenage%2Freact-qiniu/lists"}