From 92d0888756415fdc602f0130ac46b9c977522e13 Mon Sep 17 00:00:00 2001 From: Sky Date: Fri, 26 Apr 2019 17:49:41 +0800 Subject: [PATCH 1/2] Compatible with NOW React --- index.js | 115 ++++++++++++++++++++++++++++----------------------- package.json | 89 +++++++++++++++++++++++++++++---------- 2 files changed, 130 insertions(+), 74 deletions(-) diff --git a/index.js b/index.js index eb4c624..090e377 100644 --- a/index.js +++ b/index.js @@ -1,45 +1,24 @@ -/*global URL */ - +/** + * Modified by Sirosong <277702281@qq.com> + * At 2019/4/26 + * support React after version 15.4 + */ 'use strict'; -var React = require('react'); -var ReactDOM = require('react-dom') -var request = require('superagent-bluebird-promise'); + +import React from 'react' +import ReactDOM from 'react-dom' +import PropTypes from 'prop-types' +import createReactClass from 'create-react-class' +import request from 'superagent-bluebird-promise' var isFunction = function (fn) { var getType = {}; return fn && getType.toString.call(fn) === '[object Function]'; }; -function formatMaxSize(size){ - size=size.toString().toUpperCase(); - var bsize,m=size.indexOf('M'),k=size.indexOf('K'); - if(m > -1){ - bsize = parseFloat(size.slice(0, m)) * 1024 * 1024 - }else if(k > -1){ - bsize = parseFloat(size.slice(0, k)) * 1024 - }else{ - bsize = parseFloat(size) - } - return Math.abs(bsize) -} -var ReactQiniu = React.createClass({ - // based on https://github.com/paramaggarwal/react-dropzone - propTypes: { - onDrop: React.PropTypes.func.isRequired, - token: React.PropTypes.string.isRequired, - // called before upload to set callback to files - onUpload: React.PropTypes.func, - size: React.PropTypes.number, - style: React.PropTypes.object, - supportClick: React.PropTypes.bool, - accept: React.PropTypes.string, - multiple: React.PropTypes.bool, - // Qiniu - uploadUrl: React.PropTypes.string, - prefix: React.PropTypes.string, - //props to check File Size before upload.example:'2Mb','30k'... - maxSize:React.PropTypes.string, - }, +var ReactQiniu = createReactClass({ + // based on https://github.com/paramaggarwal/react-dropzone + getDefaultProps: function() { var uploadUrl = 'http://upload.qiniu.com' if (window.location.protocol === 'https:') { @@ -94,19 +73,11 @@ var ReactQiniu = React.createClass({ files = Array.prototype.slice.call(files, 0, maxFiles); this.props.onUpload(files, e); } - var maxSizeLimit=formatMaxSize(this.props.maxSize) + for (var i = 0; i < maxFiles; i++) { - if( maxSizeLimit && files[i].size > maxSizeLimit){ - console.trace && console.trace(new Error('文件大小错误!')) - this.props.onError && this.props.onError({ - coed:1, - message:'上传的文件大小超出了限制:' + this.props.maxSize - }) - }else{ - files[i].preview = URL.createObjectURL(files[i]); - files[i].request = this.upload(files[i]); - files[i].uploadPromise = files[i].request.promise(); - } + files[i].preview = URL.createObjectURL(files[i]); + files[i].request = this.upload(files[i]); + files[i].uploadPromise = files[i].request.promise(); } if (this.props.onDrop) { @@ -133,6 +104,11 @@ var ReactQiniu = React.createClass({ if (this.props.prefix) { key = this.props.prefix + key; } + + if(this.props.uploadKey){ + key = this.props.uploadKey; + } + var r = request .post(this.props.uploadUrl) .field('key', key) @@ -159,13 +135,48 @@ var ReactQiniu = React.createClass({ return ( - React.createElement('div', {className: className, style: style, onClick: this.onClick, onDragLeave: this.onDragLeave, onDragOver: this.onDragOver, onDrop: this.onDrop}, - React.createElement('input', {style: {display: 'none'}, type: 'file', multiple: this.props.multiple, ref: 'fileInput', onChange: this.onDrop, accept: this.props.accept}), - this.props.children - ) + React.createElement( + 'div', + { + className: className, + style: style, + onClick: this.onClick, + onDragLeave: this.onDragLeave, + onDragOver: this.onDragOver, + onDrop: this.onDrop + }, + React.createElement( + 'input', + { + style: {display: 'none'}, + type: 'file', + multiple: this.props.multiple, + ref: 'fileInput', + onChange: this.onDrop, + accept: this.props.accept + } + ), + this.props.children + ) ); } }); -module.exports = ReactQiniu; +ReactQiniu.propTypes = { + onDrop: PropTypes.func.isRequired, + token: PropTypes.string.isRequired, + // called before upload to set callback to files + onUpload: PropTypes.func, + size: PropTypes.number, + style: PropTypes.object, + supportClick: PropTypes.bool, + accept: PropTypes.string, + multiple: PropTypes.bool, + // Qiniu + uploadUrl: PropTypes.string, + uploadKey: PropTypes.string, + prefix: PropTypes.string +} + +export default ReactQiniu; \ No newline at end of file diff --git a/package.json b/package.json index e7989f8..aa0cf6e 100644 --- a/package.json +++ b/package.json @@ -1,40 +1,65 @@ { - "name": "react-qiniu", - "version": "1.5.0", - "description": "A React Component to upload file to Qiniu ", - "main": "index.js", - "scripts": { - "test": "jest", - "lint": "eslint ./; true" + "_from": "react-qiniu", + "_id": "react-qiniu@1.5.0", + "_inBundle": false, + "_integrity": "sha1-giiLTa/2ukNEvudN6gC/F0uJtWk=", + "_location": "/react-qiniu", + "_phantomChildren": { + "async": "1.5.2", + "combined-stream": "1.0.7", + "core-util-is": "1.0.2", + "debug": "2.6.9", + "inherits": "2.0.3", + "isarray": "0.0.1", + "methods": "1.1.2", + "mime-types": "2.1.23", + "reduce-component": "1.0.1" }, - "repository": { - "type": "git", - "url": "https://github.com/lingochamp/react-qiniu.git" + "_requested": { + "type": "tag", + "registry": true, + "raw": "react-qiniu", + "name": "react-qiniu", + "escapedName": "react-qiniu", + "rawSpec": "", + "saveSpec": null, + "fetchSpec": "latest" }, - "keywords": [ - "react-component", - "react", - "qiniu", - "upload", - "drag", - "drop" + "_requiredBy": [ + "#USER", + "/" ], - "author": "Yuan He ", - "license": "MIT", + "_resolved": "http://npmjs.7k7k.com/react-qiniu/-/react-qiniu-1.5.0.tgz", + "_shasum": "82288b4daff6ba4344bee74dea00bf174b89b569", + "_spec": "react-qiniu", + "_where": "F:\\workSpace\\open-in", + "author": { + "name": "Yuan He", + "email": "yuan@liulishuo.com" + }, + "bugs": { + "url": "https://github.com/lingochamp/react-qiniu/issues" + }, + "bundleDependencies": false, "dependencies": { "bluebird": "^3.0.0", + "create-react-class": "^15.6.3", + "prop-types": "^15.7.2", "superagent": "^1.2.0", "superagent-bluebird-promise": "^3.0.2" }, + "deprecated": false, + "description": "A React Component to upload file to Qiniu ", "devDependencies": { "babel-eslint": "^3.1.18", "babel-jest": "^5.3.0", "eslint": "^0.23.0", "eslint-plugin-react": "^2.5.2", "jest-cli": "^0.4.13", - "react": "^0.14.0", + "react": "^0.14.9", "react-dom": "^0.14.0" }, + "homepage": "https://github.com/lingochamp/react-qiniu#readme", "jest": { "scriptPreprocessor": "/node_modules/babel-jest", "unmockedModulePathPatterns": [ @@ -43,5 +68,25 @@ "testPathDirs": [ "" ] - } -} + }, + "keywords": [ + "react-component", + "react", + "qiniu", + "upload", + "drag", + "drop" + ], + "license": "MIT", + "main": "index.js", + "name": "react-qiniu", + "repository": { + "type": "git", + "url": "git+https://github.com/lingochamp/react-qiniu.git" + }, + "scripts": { + "lint": "eslint ./; true", + "test": "jest" + }, + "version": "1.5.0" +} \ No newline at end of file From cbdedd951d328721ce5a2d554058824932e8bfa2 Mon Sep 17 00:00:00 2001 From: Sky Date: Fri, 26 Apr 2019 18:22:17 +0800 Subject: [PATCH 2/2] appear a guest,blablalba --- index.js | 33 +++++++++++++++++--- package.json | 85 +++++++++++++--------------------------------------- 2 files changed, 50 insertions(+), 68 deletions(-) diff --git a/index.js b/index.js index 090e377..c1c4144 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,9 @@ * At 2019/4/26 * support React after version 15.4 */ + +/*global URL */ + 'use strict'; import React from 'react' @@ -16,6 +19,19 @@ var isFunction = function (fn) { return fn && getType.toString.call(fn) === '[object Function]'; }; +// function formatMaxSize(size){ +// size=size.toString().toUpperCase(); +// var bsize,m=size.indexOf('M'),k=size.indexOf('K'); +// if(m > -1){ +// bsize = parseFloat(size.slice(0, m)) * 1024 * 1024 +// }else if(k > -1){ +// bsize = parseFloat(size.slice(0, k)) * 1024 +// }else{ +// bsize = parseFloat(size) +// } +// return Math.abs(bsize) +// } + var ReactQiniu = createReactClass({ // based on https://github.com/paramaggarwal/react-dropzone @@ -24,7 +40,6 @@ var ReactQiniu = createReactClass({ if (window.location.protocol === 'https:') { uploadUrl = 'https://up.qbox.me/' } - return { supportClick: true, multiple: true, @@ -74,10 +89,20 @@ var ReactQiniu = createReactClass({ this.props.onUpload(files, e); } + // var maxSizeLimit = formatMaxSize(this.props.maxSize) + for (var i = 0; i < maxFiles; i++) { - files[i].preview = URL.createObjectURL(files[i]); - files[i].request = this.upload(files[i]); - files[i].uploadPromise = files[i].request.promise(); + // if( maxSizeLimit && files[i].size > maxSizeLimit){ + // console.trace && console.trace(new Error('文件大小错误!')) + // this.props.onError && this.props.onError({ + // coed:1, + // message:'上传的文件大小超出了限制:' + this.props.maxSize + // }) + // }else{ + files[i].preview = URL.createObjectURL(files[i]); + files[i].request = this.upload(files[i]); + files[i].uploadPromise = files[i].request.promise(); + //} } if (this.props.onDrop) { diff --git a/package.json b/package.json index aa0cf6e..2fcfb63 100644 --- a/package.json +++ b/package.json @@ -1,46 +1,26 @@ { - "_from": "react-qiniu", - "_id": "react-qiniu@1.5.0", - "_inBundle": false, - "_integrity": "sha1-giiLTa/2ukNEvudN6gC/F0uJtWk=", - "_location": "/react-qiniu", - "_phantomChildren": { - "async": "1.5.2", - "combined-stream": "1.0.7", - "core-util-is": "1.0.2", - "debug": "2.6.9", - "inherits": "2.0.3", - "isarray": "0.0.1", - "methods": "1.1.2", - "mime-types": "2.1.23", - "reduce-component": "1.0.1" + "name": "react-qiniu", + "version": "1.5.0", + "description": "A React Component to upload file to Qiniu ", + "main": "index.js", + "scripts": { + "test": "jest", + "lint": "eslint ./; true" }, - "_requested": { - "type": "tag", - "registry": true, - "raw": "react-qiniu", - "name": "react-qiniu", - "escapedName": "react-qiniu", - "rawSpec": "", - "saveSpec": null, - "fetchSpec": "latest" + "repository": { + "type": "git", + "url": "https://github.com/lingochamp/react-qiniu.git" }, - "_requiredBy": [ - "#USER", - "/" + "keywords": [ + "react-component", + "react", + "qiniu", + "upload", + "drag", + "drop" ], - "_resolved": "http://npmjs.7k7k.com/react-qiniu/-/react-qiniu-1.5.0.tgz", - "_shasum": "82288b4daff6ba4344bee74dea00bf174b89b569", - "_spec": "react-qiniu", - "_where": "F:\\workSpace\\open-in", - "author": { - "name": "Yuan He", - "email": "yuan@liulishuo.com" - }, - "bugs": { - "url": "https://github.com/lingochamp/react-qiniu/issues" - }, - "bundleDependencies": false, + "author": "Yuan He ", + "license": "MIT", "dependencies": { "bluebird": "^3.0.0", "create-react-class": "^15.6.3", @@ -48,8 +28,6 @@ "superagent": "^1.2.0", "superagent-bluebird-promise": "^3.0.2" }, - "deprecated": false, - "description": "A React Component to upload file to Qiniu ", "devDependencies": { "babel-eslint": "^3.1.18", "babel-jest": "^5.3.0", @@ -57,9 +35,8 @@ "eslint-plugin-react": "^2.5.2", "jest-cli": "^0.4.13", "react": "^0.14.9", - "react-dom": "^0.14.0" + "react-dom": "^0.14.9" }, - "homepage": "https://github.com/lingochamp/react-qiniu#readme", "jest": { "scriptPreprocessor": "/node_modules/babel-jest", "unmockedModulePathPatterns": [ @@ -68,25 +45,5 @@ "testPathDirs": [ "" ] - }, - "keywords": [ - "react-component", - "react", - "qiniu", - "upload", - "drag", - "drop" - ], - "license": "MIT", - "main": "index.js", - "name": "react-qiniu", - "repository": { - "type": "git", - "url": "git+https://github.com/lingochamp/react-qiniu.git" - }, - "scripts": { - "lint": "eslint ./; true", - "test": "jest" - }, - "version": "1.5.0" + } } \ No newline at end of file