Exporting formData from React to Spring boot backend

Question

React code for build jsonBlob object

function  jsonBlob(obj) {
  return new Blob([JSON.stringify(obj)], {
    type: "application/json",
  });
}

 exportFTP = () => {
    const formData = new FormData();
    formData.append("file", jsonBlob(this.state.ipData));
    alert("Logs export to FTP server")

    axios({
      method: "post",
      url: "http://localhost:8080/api/auth/uploadfiles",
      data: formData,
      headers: {
        Accept: "application/json ,text/plain, */*",
        "Content-Type": "multipart/form-data",
      },
    });
  };

Spring boot backend that accepts for frontend request

public class UploadFile {
    @Autowired
    private FTPClient con;

    @PostMapping("/api/auth/uploadfiles")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {

        try {
            boolean result = con.storeFile(file.getOriginalFilename(), file.getInputStream());
            System.out.println(result);

        } catch (Exception e) {
            System.out.println("File store failed");
        }

        return "redirect:/";
    }

I want to figure out when I called the function from the frontend it's working properly but I change the state its doesn't send the object to the backend while the file appears in the directory. if I delete the file then only send it again and save it on the directory. How I save multiple files while doesn't delete the previous ones

Thank you very much for your time and effort.

Endless · Accepted Answer · 2021-05-15 14:40:51Z

1

"Content-Type": "multipart/form-data",

Don't set the Content-Type yourself when posting a FormData. The Content-Type needs to contain the boundary value that's generated by a FormData
(example: multipart/form-data; boundary=----WebKitFormBoundaryzCZHB3yKO1NSWzsn). It will automatically be inserted when posting a FormData instance, so leave this header out.

When you append blobs to a formdata then it will default the filename to just "blob"

On the backend you seems to override the file all the time:

con.storeFile(file.getOriginalFilename(), file.getInputStream());

Generate a new unik name if you want to keep all files

of topic but why not go with the fetch api? Smaller footprint. don't require a hole library...

fetch('http://localhost:8080/api/auth/uploadfiles', {
  method: 'POST',
  body: formData,
  headers: {
    Accept: 'application/json ,text/plain, */*'
  }
})

answered May 15, 2021 at 14:40

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Janitha_Missaka Over a year ago

Thank you very much for your time @Endless for this con.storeFile(file.getOriginalFilename(), file.getInputStream()); I cant properly understand to make change because Im beginner here. I tried use string instead of file.getoriginalfilename() but its doesn't work

Janitha_Missaka Over a year ago

I used boolean result = con.storeFile(String.valueOf(file), file.getInputStream()); Its allows to save multiple files but same name appears.

Janitha_Missaka · Accepted Answer · 2021-05-18 10:06:24Z

In React application I used props to pass the file name from a different state and make sure to remove,

"Content-Type": "multipart/form-data",

Main function in React,

 exportFTP = ({props from different state}) => {
    const formData = new FormData();
    formData.append("file", jsonBlob(this.state.ipData),{You can use this parm for pass name});
    alert("Logs export to FTP server")

    axios({
      method: "post",
      url: "http://localhost:8080/api/auth/uploadfiles",
      data: formData,
      headers: {
        Accept: "application/json ,text/plain, */*"
 
      },
    });
  };

And back end code I used same to get the original name then Its appears with the right name.

con.storeFile(file.getOriginalFilename(), file.getInputStream());

Chears !!

Collectives™ on Stack Overflow

Exporting formData from React to Spring boot backend

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related