i have been searching while reactjs component allow upload file browser , have saved server reactjs running on.
i have found various components drag , drop etc , superagent possibly saving file server figured might have created component of this?
the end java application using spring boot, spring data jpa , spring data rest.
does know of 1 or tutorial on setting basic way save file server?
solution
in end used part of solution below dropzone , superagent , utilized spring guide (https://spring.io/guides/gs/uploading-files/)
uploader component
'use strict'; const react = require('react'); const reactdom = require('react-dom'); const log = require('./log'); // logger enable debug alerts // import components const dropzone = require('react-dropzone'); const request = require('superagent'); //'application/java-archive' class uploader extends react.component { constructor(props) { super(props); this.drophandler = this.drophandler.bind(this); } drophandler(file) { var jsonfile = new formdata(); jsonfile.append('file', file[0]); jsonfile.append('name', file[0].name); request.post('/upload') .send(jsonfile) .end(function(err, resp) { if (err) { console.error(err); } return resp; }); } render() { return ( <dropzone disableclick={false} multiple={false} accept={'application/java-archive'} ondrop={this.drophandler}> < div > drop appium jar, or click add. < /div > </dropzone> ); } } module.exports = uploader fileuploadcontroller
@controller public class fileuploadcontroller { @requestmapping(value="/upload", method=requestmethod.get) public @responsebody string provideuploadinfo() { return "you can upload file posting same url."; } @requestmapping(value="/upload", method=requestmethod.post) public @responsebody responseentity<string> handlefileupload(@requestparam("name") string name, @requestparam("file") multipartfile file) throws exception{ if (name.contains("/")) { return responseentity.status(httpstatus.unprocessable_entity).body("folder separators not allowed."); } else if (name.contains("/")) { return responseentity.status(httpstatus.unprocessable_entity).body("relative pathnames not allowed."); } else if (!name.endswith(".jar")) { return responseentity.status(httpstatus.unprocessable_entity).body("file type not allowed. must jar file type ending in '.jar'."); } if (!file.isempty()) { try { byte[] bytes = file.getbytes(); bufferedoutputstream stream = new bufferedoutputstream(new fileoutputstream(new file(name))); stream.write(bytes); stream.close(); return responseentity.ok("file " + name + " uploaded."); } catch (exception e) { return responseentity.status(httpstatus.unprocessable_entity).body(e.getmessage()); } } else { return responseentity.status(httpstatus.unprocessable_entity).body("you failed upload " + name + " because file empty."); } } }
you want through server. kind of backend using? if using node.js there npm module called multer saves files server. talk in blogpost react dropzones. without more info on backend hard need do.
