(window.webpackJsonp=window.webpackJsonp||[]).push([[144],{715:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return C});var t=s(32),p=s.n(t),o=s(28),e=s.n(o),c=s(580),u=s.n(c),l=s(23),i=s.n(l),k=s(24),r=s.n(k),d=s(25),m=s.n(d),g=s(26),f=s.n(g),h=s(27),y=s.n(h),v=s(0),w=s.n(v),b=s(111),N=s(82),z=function(){var n=[{id:205772,name:"test1"},{id:205773,name:"test2"},{id:205774,name:"test3"}],a=function(a){function s(n){var a;return i()(this,s),(a=m()(this,f()(s).call(this,n))).state={imageList:[]},a}return y()(s,a),r()(s,[{key:"renderTrigger",value:function(){return w.a.createElement("span",null)}},{key:"fetchNetworkImage",value:function(n){var a=this;return new Promise(function(s){a.setState({imageList:[{file:null,src:n}]}),s(n)})}},{key:"updateLocalImage",value:function(n){var a=this;return new Promise(function(s){setTimeout(function(){a.setState({imageList:n}),s(n)},1e3)})}},{key:"render",value:function(){return w.a.createElement("div",null,this.state.imageList.map(function(n,a){return w.a.createElement("img",{className:"zent-upload-demo-pic",width:"80",height:"80",key:a,src:n.src,style:{marginRight:"10px"}})}),w.a.createElement(N.Hb,{className:"zent-upload-demo-pic",maxSize:1048576,maxAmount:2,triggerInline:!0,tips:"Recommended image size: 640px x 640px",categoryList:n,onFetch:this.fetchNetworkImage.bind(this),onUpload:this.updateLocalImage.bind(this),errorMessages:{overMaxSize:function(n){return"Over size: ".concat(n.maxSize)},overMaxAmount:"So many",wrongMimeType:function(){return!1}}}))}}]),s}(w.a.Component);return w.a.createElement(a,null)},x=function(){var n=function(n){function a(n){var s;return i()(this,a),(s=m()(this,f()(a).call(this,n))).state={voiceList:[]},s}return y()(a,n),r()(a,[{key:"renderTrigger",value:function(){return w.a.createElement("span",null)}},{key:"fetchNetworkImage",value:function(n){var a=this;return new Promise(function(s){a.setState({voiceList:[n]}),s(n)})}},{key:"updateLocalImage",value:function(n){var a=this;return new Promise(function(s){a.setState({voiceList:n}),s(n)})}},{key:"render",value:function(){return w.a.createElement("div",null,this.state.voiceList.map(function(n,a){return w.a.createElement("div",{key:a,style:{fontSize:12,lineHeight:1.5,marginTop:10}},w.a.createElement("p",null,"File Name: ",n.file.name),w.a.createElement("p",null,"File Size: ",(n.file.size/1024).toFixed(1)," KB"))}),w.a.createElement(N.Hb,{maxSize:8e6,triggerInline:!0,tips:"",type:"voice",accept:"audio/mp3, audio/mpeg",maxAmount:1,onFetch:this.fetchNetworkImage.bind(this),onUpload:this.updateLocalImage.bind(this),triggerClassName:"",trigger:function(){return w.a.createElement("a",{href:"javascript:;"},"Upload Voice")}}))}}]),a}(w.a.Component);return w.a.createElement(n,null)};function E(n){return w.a.createElement(n.tag,u()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return w.a.createElement(E,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function L(n){return w.a.createElement(E,{tag:"style",html:n.style})}var I=function(n){function a(){var n,s;i()(this,a);for(var t=arguments.length,o=new Array(t),c=0;cUpload\n

File uploader. Supports images and audios.

\n

Demos

'}),w.a.createElement(I,{title:"Basics",id:"Demobasic",src:'import { Upload } from \'zent\';\n\nconst categoryList = [\n { id: 205772, name: \'test1\' },\n { id: 205773, name: \'test2\' },\n { id: 205774, name: \'test3\' }\n];\n\nclass Simple extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n imageList: []\n };\n }\n\n renderTrigger() {\n return <span></span>;\n }\n\n fetchNetworkImage(data) {\n return new Promise(resolve => {\n this.setState({\n imageList: [{\n file: null,\n src: data\n }]\n });\n resolve(data);\n });\n }\n\n updateLocalImage(data) {\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n imageList: data\n });\n resolve(data);\n }, 1000);\n });\n }\n\n render() {\n return (\n <div>\n {this.state.imageList.map((item, index) => (\n <img className=\'zent-upload-demo-pic\' width="80" height="80" key={index} src={item.src} style={{marginRight: \'10px\'}} />\n ))}\n <Upload\n className=\'zent-upload-demo-pic\'\n maxSize={1 * 1024 * 1024}\n maxAmount={2}\n triggerInline\n tips="Recommended image size: 640px x 640px"\n categoryList={categoryList}\n onFetch={this.fetchNetworkImage.bind(this)}\n onUpload={this.updateLocalImage.bind(this)}\n errorMessages={{\n overMaxSize: (data) => `Over size: ${data.maxSize}`, // function\n overMaxAmount: \'So many\', // string\n wrongMimeType: false || null || \'\' || (() => false) // show nothing\n }}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(z)),w.a.createElement(I,{title:"Upload Voice",id:"Demovoice",src:'import { Upload } from \'zent\';\n\nclass Simple extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n voiceList: []\n };\n }\n\n renderTrigger() {\n return <span></span>;\n }\n\n fetchNetworkImage(data) {\n return new Promise(resolve => {\n this.setState({\n voiceList: [data]\n });\n resolve(data);\n });\n }\n\n updateLocalImage(data) {\n return new Promise(resolve => {\n this.setState({\n voiceList: data\n });\n resolve(data);\n })\n }\n\n render() {\n return (\n <div>\n {this.state.voiceList.map((item, index) => (\n <div key={index} style={{ fontSize: 12, lineHeight: 1.5, marginTop: 10 }}>\n <p>File Name: {item.file.name}</p>\n <p>File Size: {(item.file.size / 1024).toFixed(1)} KB</p>\n </div>\n ))}\n <Upload\n maxSize={8 * 1000 * 1000}\n triggerInline\n tips=""\n type="voice"\n accept="audio/mp3, audio/mpeg"\n maxAmount={1}\n onFetch={this.fetchNetworkImage.bind(this)}\n onUpload={this.updateLocalImage.bind(this)}\n triggerClassName=""\n trigger={() => <a href="javascript:;">Upload Voice</a>}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},w.a.createElement(x)),w.a.createElement(S,{html:"

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultRequired
typeUpload type, the default value is 'image', use 'voice' for audiostring'image'No
localOnlyAllow local images onlybooleanfalseNo
tipsHint textstring''No
maxSizeImage size limit in bytesnumber1024 * 1024No
maxAmountLimit number of images, 0 means no limitnumber0No
acceptAllowed file typesstring'image/gif, image/jpeg, image/png, image/bmp'No
silentDeprecated, No notification about sucesss/failure when set to truebooleanfalseNo
triggerInlineMake trigger node's display inlinebooleanfalseNo
onFetchCallback to fetch remote imagefunctionnoopNo
onUploadCallback to upload local imagefunctionnoopNo
filterFilesFilter local files, supports Promise as return valuefunctionnoopNo
categoryListGroup dataarray[]No
categoryIdGroup idnumber[]No
autoOpen upload dialog automaticallybooleanfalseNo
withoutPopupDon't render inside a popupbooleanfalseNo
triggerClassNameCustom trigger class namestring'zent-upload-trigger'No
errorMessagesCustom error message, contains overMaxSize, overMaxAmount, wrongMimeTypeobject{}No
classNameExtension class namestring''No
prefixCustom prefixstring'zent'No
"}))}}]),a}(v.Component)}}]);