JS File Upload

Here is the REACT implementation

Encapsulate the Import together IMPORT.JSX

1Import React from ' React ';2Import reactdom from ' React-dom ';3 class Import extends React.component {4 Constructor (props) {5 super (props);6          This. Bindhander ();7     };8 9 Bindhander () {Ten          This. Opendisk = This. Opendisk.bind ( This); One          This. readfilecontent = This. Readfilecontent.bind ( This); A     }; -  - Opendisk () { the          This. Fileupload.click (); -     }; -  - Readfilecontent (e) { +  Let -_self = This, +File = E.target.files[0]; A         if(file) { at  Let -Reader =NewFileReader (); - reader.readasarraybuffer (file); -Reader.onload =function () { -_self.props.uploadcallback (File.name,NewUint8array ( This. Result)); -             }; in}Else -Console.log (' ERROR '); to     }; +  - render () { the         return<input type= "File" hidden ref={(el) = { This. FileUpload = el}} onchange={ This. readfilecontent} accept= ". xml"/> *     } $ };Panax NotoginsengExportdefaultImport;

Referencing import in INDEX.JSX

1Import import from './import ';2Const CONTANTS = {3Error: ' ERROR ',4TIMEOUT: ' Load Time Out ',5Loaderror: ' Load error! ',6Urlcannotfind: ' Url can not find '7 }8 9 Export Class Test extends React.component {Ten Constructor (props) { One Super (props) A     }; -  - Uploadclick () { the          This. Import.opendisk () -     }; -  - Uploadhandler (name, content) { +G.loading (true); -  Let +UploadFile = { A Name:name, at filecontent:content -             }, -Request = { -Method: ' POST ', - headers: { -' Accept ': ' Application/json ', in"Content-type": "Application/json" -                 }, toCredentials: "Same-origin", + body:JSON.stringify (UploadFile) -             }; theFetch (' api/test/fileupload ', request). Then (response = { *             if(Response.ok) $                 returnResponse.text ();Panax Notoginseng             Else { -                 if(Response.Status = = 401) { theG.loading (false); +G.alert (true, { A title:contants. ERROR, the content:contants. TIMEOUT, +Type: ' I ', -Clicky: () ={console.log (contants). Loaderror)} $                     }); $                 } -                 if(Response.Status = = 400) { -G.loading (false); theG.alert (true, { - title:contants. ERROR,Wuyi content:contants. Urlcannotfind, theType: ' I ', -Clicky: () ={console.log (contants). Loaderror)} Wu                     }); -                 } About                 Else Throw NewError (response.statustext); $             }; -}). Then (Datastr = { -             if(Datastr = =NULL|| Datastr = = "') -                 return NULL; A             Else returnJson.parse (DATASTR); +         }) the     } -  $ render () { the         return<div> the<div onclick={ This. Uploadclick.bind ( This)}>{' Upload Click '}</div> the<Import theRef={el = This. import =El} -uploadcallback={ This. Uploadhandler.bind ( This)} in/> the</div> the     } About}

JS File Upload