Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I have an input field of type file in my reactjs frontend. I want to upload a CSV file and send it over to my server which uses SpringBoot. I am having problems on how to get that file once it is fetched to my backend.

This is my file input in my render method:

<input
    accept=".csv"
    type="file"
    onChange={this.handleChange}
<Button primary onClick={this.handleSubmit}> Submit </Button>

HandleSubmit:

handleSubmit(event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append('file', this.state.csv);
        fetch('http://localhost:8080/ingest', {
                method: 'POST',
                body: formData
            .then((res) => {
                    var promiseStatus = res.text();
                    promiseStatus.then(function (value) {
                        console.log(value);

My backend controller is

@PostMapping(INGEST_URL)
public String ingestDataFile(@RequestBody ??? response) {
    return "temporary return";

What should ingestDataFile() take as a requestBody, to say, to print the content of the file.

    @PostMapping(INGEST_URL)
    public String ingestDataFile(@RequestParam("file") MultipartFile file,
RedirectAttributes redirectAttributes) {
     if (file.isEmpty()) {
                redirectAttributes.addFlashAttribute("message", "No File is Present");
                return "redirect:uploadStatus";
             try {
                // Get the file and save it somewhere
                byte[] bytes = file.getBytes();
                Path path = Paths.get("FOLDER TO UPLOAD TO" + file.getOriginalFilename());
                Files.write(path, bytes);
                redirectAttributes.addFlashAttribute("message",
                        "File upload successful'" + file.getOriginalFilename() + "'");
            } catch (IOException e) {
                e.printStackTrace();
            return "redirect:/uploadStatus";
    @GetMapping("/uploadStatus")
        public String uploadStatus() {
            return "uploadStatus";
@PostMapping(INGEST_URL)
public String ingestDataFile(@RequestParam("file") MultipartFile file) {
    System.out.println("Name is::: " + file.getName());
    // Get file in byte[] using file.getBytes()
    storeCSVInDbServer(file); 
    return "temporary return";

If you want to store file in a database server, you can store it in a BLOB column of database.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.