Ho cercato per un po 'per un ReactJS
component
per consentire di caricare un file da un browser
e lo hanno salvato al server ReactJS
è in esecuzione su .ReactJS componente di caricare un file su un server/Data-REST Spring MVC
ho trovato vari component
s per drag and drop
ecc e superagent
per, eventualmente, salvare il file sul server ma ho pensato che qualcuno potrebbe aver creato una component
per tutto questo?
Il back-end è un'applicazione Java che utilizza Spring Boot, Spring Data JPA e Spring Data REST.
Qualcuno sa di uno o di un tutorial su come impostare un modo semplice per salvare il file sul server?
Soluzione
Alla fine ho usato parte della soluzione sotto con zona di lancio e superagent e poi utilizzato la guida molla (https://spring.io/guides/gs/uploading-files/)
componentecaricata
'use strict';
const React = require('react');
const ReactDOM = require('react-dom');
const log = require('./log'); // logger to enable debug alerts
// import the 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 a Appium Jar, or click to 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 a file by posting to this 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 be a 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 to upload " + name + " because the file was empty.");
}
}
}
Dipende davvero da dove si pianifica di memorizzare il file/come si presenta il proprio back-end. Vorrei iniziare trovando un metodo accessibile ajax per salvare il file. Da lì, la creazione di un componente reattivo per eseguire la chiamata ajax è abbastanza banale e non qualcosa che probabilmente avrà bisogno dell'aiuto di un componente esterno per il raggiungimento. – gravityplanx