Unsupported error while transfering multipart/form-data to spring boot

Question

I wanted to send file data and form data to spring boot, so I sent it by using mutipart/form-data. StoreData.js

import React from 'react';
import Button from 'react-bootstrap/Button';
import axios from 'axios';

function StoreData(props){

    const check = (event) => {
        event.preventDefault();

        const url = window.location.href;
        console.log(url);

        const fmd = new FormData();
        fmd.append('formValue',props.sendData.formValue);
        fmd.append('file',props.sendData.file)

        if(url.includes('kpop')){
            console.log('kpop 저장할거얌');
            axios.post('/manager/kpopinfo',fmd,{
                headers:{
                    'Content-Type' : 'multipart/form-data'
                }
            })
            .then(function(res){
                console.log(res);
                alert("서버 저장 완료!");
                window.location.reload();
            })
            .catch(function(error){
                console.log(error);
            })
        }else if(url.includes('culture')){
            console.log('culture 저장할거얌');
            axios.post('/manager/cultureinfo',fmd,{
                headers:{
                    'Content-Type' : 'multipart/form-data'
                }
            })
            .then(function(res){
                console.log(res);
                alert("서버 저장 완료!");
                window.location.reload();
            })
            .catch(function(error){
                console.log(error);
            })
        }
        console.log(props.sendData);
    }
    return(
        <Button variant="primary" type="submit" onClick={check}>제출</Button>
    );
}
export default StoreData;

And I wanted to get file data and form data at spring boot controller.

Controller.java

package com.prac.react.controller;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.prac.react.model.dto.Celebrity;
import com.prac.react.model.dto.Culture;

@RestController
@RequestMapping("manager")
public class ManagerController{

    Logger logger = LoggerFactory.getLogger(ManagerController.class);
    Date date = new Date();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");-

    @PostMapping("/cultureinfo")
    public int insertCultureInfo(@RequestPart("formValue") Culture culture,@RequestPart("file") MultipartFile mpf){
        logger.info("문화 저장 들어옴");
        logger.info("culture : "+ culture.toString());
        logger.info("culture : "+ mpf.toString()); 
        int extension = culture.getFileUrl().lastIndexOf("."); 
        String newFileName = sdf.format(date) + culture.getFileUrl().substring(extension);
        logger.info("changed file name : "+newFileName);

        return 200;
    }

    @PostMapping("/kpopinfo")
    public int insertKpopInfo(@RequestBody Celebrity celeb){
        logger.info("kpop 저장 들어옴");
        logger.info("celeb : "+ celeb.toString());

        int extension = celeb.getFileUrl().lastIndexOf(".");
        String newFileName = sdf.format(date) + celeb.getFileUrl().substring(extension);
        logger.info("changed file name : "+newFileName);



        return 200;
    }
}

But I'm getting 415 error in front-end and getting error below in controller.

2022-08-01 17:21:45.068 WARN 16644 --- [nio-8080-exec-1].wsmsDefaultHandlerExceptionResolver: Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

How can I get form data and file data in controller??

Answer 1

The above error occurred because the JavaScript object was sent to the controller. Because the controller was ready to import json files, it had to send javascript objects in json format. So I stringigy the javascript object.

const json = JSON.stringify(props.sendData.formValue);

And I sent the application/json type through blob because I have to send it by application/json type.

        const blob = new Blob([json],{
            type : 'application/json'
        })

At last I append blob to Formdata and send it by axios

fmd.append('formValue',blob);

axios.post('/mg/kpi',fmd,{
                headers:{
                    'Content-Type' : 'multipart/form-data'
                }
            })
            .then(function(res){
                console.log(res);
                alert("서버 저장 완료!");
                window.location.reload();
            })
            .catch(function(error){
                console.log(error);
            })