2016-06-06 27 views
5

Ho cercato per un po 'per un ReactJScomponent 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/)

componente

caricata

'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."); 
     } 
    } 
} 
+0

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

risposta

2

Si vorrebbe farlo attraverso il proprio server. Che tipo di back-end stai usando? Se stai usando Node.js, c'è un modulo npm chiamato Multer che salva i file sul tuo server. Ne parlo un po 'nel mio post sul blog su react dropzones. Senza ulteriori informazioni sul tuo backend è difficile dire esattamente cosa devi fare.

+0

Il tuo post sul blog si è rivelato utile. – ALM

+0

Grazie, lo apprezzo! –