react-webuploader
Version:
a react component for upload files based on webuploader
1 lines • 5.09 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function o(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,r,t){return r&&o(e.prototype,r),t&&o(e,t),e}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_uuid=require("uuid"),_uuid2=_interopRequireDefault(_uuid),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_jquery=require("jquery"),_jquery2=_interopRequireDefault(_jquery);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}function _inherits(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}window.jQuery=_jquery2.default;var noop=function(){},webuploader=require("webuploader"),WebUploader=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={},r.key=e.key||(0,_uuid2.default)(),r}return _inherits(t,_react2.default.Component),_createClass(t,[{key:"componentDidMount",value:function(){this.initWebUploaderHook(),this.createWebUploaderInterface(),this.bindWebUploaderEvent()}},{key:"initWebUploaderHook",value:function(){var i=this.props.server;webuploader.Uploader.register({"before-send-file":"beforeSendFile","before-send":"beforeSend","after-send-file":"afterSendFile"},{beforeSendFile:function(o){var u=this,n=new _jquery2.default.Deferred,e=o.md5,r=o.size,t=o.ext;return _jquery2.default.get(i+"/upload/filecheck?md5="+e+"&size="+r+"&ext="+t).done(function(e){var r=e.exists,t=e.path;r?(o.path=t,u.uploader.skipFile(o),n.reject()):n.resolve()}).fail(function(){n.resolve()}),_jquery2.default.when(n)},beforeSend:function(e){var r=e.file,t=r.md5,o=r.ext,u=r.size,n=e.chunk,a=new _jquery2.default.Deferred;return _jquery2.default.get(i+"/upload/chunkcheck?md5="+t+"&chunk="+n+"&size="+u+"&ext="+o).done(function(e){e.exists?a.reject():a.resolve()}).fail(function(){a.resolve()}),_jquery2.default.when(a)},afterSendFile:function(t){var e=t.md5,r=t.size,o=t.ext,u=this.options.chunkSize,n=Math.ceil(r/u)||0;if(1<n){var a=new _jquery2.default.Deferred;return _jquery2.default.ajax({url:i+"/upload/chunksmerge",method:"POST",data:JSON.stringify({md5:e,size:r,ext:o,chunks:n}),contentType:"application/json"}).done(function(e){var r=e.path;t.path=r,a.resolve()}).fail(function(){a.reject()}),_jquery2.default.when(a)}}})}},{key:"createWebUploaderInterface",value:function(){var e=this.props,r=e.server,t=e.key,o=e.chunked,u=e.formData,n=e.fileNumLimit,a=e.threads,i=e.auto;this.uploader=webuploader.create({pick:"#"+t,server:r+"/upload",chunked:o,formData:u,fileNumLimit:n,threads:a,auto:i})}},{key:"bindWebUploaderEvent",value:function(){var e=this.props,o=e.fileQueued,r=e.uploadStart,t=e.uploadSuccess,u=e.uploadComplete,n=e.uploadProgress,a=e.onError;this.uploader.on("fileQueued",function(r){var t=this;this.md5File(r,0,1048576).then(function(e){r.md5=e,t.options.formData.md5=e,r.tempKey=(0,_uuid2.default)(),r.percentage=0,o(r),t.upload()})}).on("uploadStart",function(e){r(e)}).on("uploadSuccess",function(e,r){t(e,r),r&&r.path&&(e.path=r.path),t(e)}).on("uploadComplete",function(e){u(),this.removeFile(e.id)}).on("uploadProgress",function(e,r){n(e,Math.floor(100*r))}).on("error",function(e){console.log("当前时间 "+Date.now()+": debug 的数据是 error: ",e),a(e)})}},{key:"handleChooseFile",value:function(){var e=this.uploaderWrap.querySelector("input");if(!e)throw new Error("react-webuploader init failed~\n please reload the page or contact your developer");e.click()}},{key:"render",value:function(){var r=this;return _react2.default.createElement("div",{ref:function(e){r.uploaderWrap=e},id:this.key,key:this.key})}}]),t}();(exports.default=WebUploader).propTypes={key:_propTypes2.default.string,chunked:_propTypes2.default.bool,server:_propTypes2.default.string.isRequired,formData:_propTypes2.default.object,fileNumLimit:_propTypes2.default.number,threads:_propTypes2.default.number,auto:_propTypes2.default.bool,fileQueued:_propTypes2.default.func,uploadStart:_propTypes2.default.func,uploadSuccess:_propTypes2.default.func,uploadComplete:_propTypes2.default.func,uploadProgress:_propTypes2.default.func,onError:_propTypes2.default.func},WebUploader.defaultProps={key:(0,_uuid2.default)(),chunked:!1,formData:{md5:""},fileNumLimit:5,threads:3,auto:!0,fileQueued:noop,uploadStart:noop,uploadSuccess:noop,uploadComplete:noop,uploadProgress:noop,onError:noop};
;