react springboot file download error (file size increases)

Question

I have small problem while developing react, spring boot application dashboard. Here is my problem, I developed file upload dashboard it's requests from client (react) to backend server side (springboot) by axios call multipart-form. Seem there is no problem on uploading file to server (because uploaded file opens well inside of server and the file size is equal). However, when I downloading the file the file size increases and cannot open properly (It's shows alarm that the file damaged). Now I don't know where to find the solution :( plz help me.

here is my react code which has axios call with file name:

function fileDownlod(props) {
api.responseType = 'blob'
api.defaults.headers.common[`Authorization`] = 'Bearer ' + localStorage.getItem('token')
api
  .post('/filedown', { uuid: props }, header)
  .then((response) => {
    const name = response.headers['content-disposition'].split('fileName=')[1]
    console.log(response.headers)
    console.log(name)
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', name)
    link.style.cssText = 'display:none'
    document.body.appendChild(link)
    link.click()
    link.remove()
  })

and this is my spring boot code (where I checked that the file size both equal)

    @CrossOrigin(value = {"*"})
@RequestMapping(value = "/filedown", method= {RequestMethod.POST, RequestMethod.GET})
public void fileDown (@RequestBody FileEntity param, HttpServletResponse response) throws Exception {
    String fileFullPath = fileLocation + param.getUuid();
    try{
        Path filePath = Paths.get(fileFullPath);
        FileEntity fileEntity = fileRepository.findByUuid(param.getUuid());

        if(fileEntity.getContentType().contains("image")){
            response.setContentType("multipart/form-data");
        }else{
            response.setContentType("application/octet-stream");
        }

        response.setHeader("Content-Disposition", "attachment; fileName=" + URLEncoder.encode(fileEntity.getFileName(),"UTF-8"));
        response.setHeader("Content-Transfer-Encoding", "binary");
       // response.setHeader( "Access-Control-Allow-Headers","Content-Disposition");
        response.setHeader( "Access-Control-Expose-Headers","Content-Disposition");
        byte[] fileByte = FileUtils.readFileToByteArray(new File(fileFullPath));

        System.out.println("file size of fileByte: " + fileByte.length);
        System.out.println("file size of file inf. from DB: " + fileEntity.getFileSize());
        response.getOutputStream().write(fileByte);
        response.getOutputStream().flush();
        response.getOutputStream().close();

For more information, I'm develeping in macOS and when I deploy the application file download won't work in iphone eihter :( Any suggestion? thank you.

Answer 1

I found my answer by myself the problem was "api.responseType = 'blob'" which didn't work as responseType. this was my solution below

api
  .post('/filedown', { uuid: props }, { responseType: 'blob' }, header)