An error occurs when sending multipart files using formData - reactjs

Question

I'd like to send a file using "formData".
I'm using Spring boot for backend, and React.js for frontend.
With PostMan, I checked the Spring boot to ensure that the files are stored properly.
But when I attach a file to formData and send it, an error occurs.
Below is the error.
.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]
Below is a part of React.js
class Test extends Component {
constructor(props){
super(props);
this.state = {
fileList:[]
};
this.uploadNewWebtoon = this.uploadNewWebtoon.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange=({ fileList })=> {
this.setState({ fileList }, function(){
console.log(this.state.fileList[0].originFileObj)
})
}
uploadNewWebtoon() {
try {
uploadFile(this.state.fileList[0].originFileObj)
} catch(error) {
notification.error({
message: 'Cheeze Toon',
description: error.message || 'Try again.'
});
}
}
render() {
return (
<div className="newAdd-container">
<Form onSubmit={this.uploadNewWebtoon}>
<Form.Item label="Thumbnail">
<Dragger onChange={this.onChange} beforeUpload={() => false} >
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company data or other
band files
</p>
</Dragger>
</Form.Item>
<Form.Item>
<Button type="primary" className="newAddButton" size="large" htmlType="submit">Save</Button>
</Form.Item>
</Form>
</div>
);
}
}
I'm using the React UI Library called Ant Design. So I followed the official document and used this.state.fileList[0].originFileObj in the same sense as event.target.files[0].
orginFileObj of filesList[0] consists of the following
Below is the part that I create the formData, attach the file to append(), and transfer it to fetch.
import { API_BASE_URL, ACCESS_TOKEN} from '../constants';
const request = (options) => {
const headers = new Headers()
if(localStorage.getItem(ACCESS_TOKEN)) {
headers.append('Authorization', 'Bearer ' + localStorage.getItem(ACCESS_TOKEN))
}
const defaults = {headers: headers};
options = Object.assign({}, defaults, options);
return fetch(options.url, options)
.then(response =>
response.json().then(json => {
if(!response.ok) {
return Promise.reject(json);
}
return json;
})
);
};
export function uploadFile(fileList) {
const formData = new FormData();
formData.append('fileList', fileList);
return request({
url:API_BASE_URL + "/newToonSave",
method: 'POST',
body : formData
})
}
JWT TOKEN is included in the header due to login function.
I tried to attach option after append value, (like fileName = fileList.name...)
but the result was the same.
This is the spring boot controller part.
#RestController
#RequestMapping("/api")
public class ToonController {
private static final Logger logger = LoggerFactory.getLogger(ToonController.class);
#Autowired
private ToonStorageService toonStorageService;
#PostMapping(value = "/newToonSave", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
#PreAuthorize("hasRole('ADMIN')")
public ToonStorage uploadFile(#RequestParam("file") MultipartFile file) {
ToonStorage toonStorage = toonStorageService.storeFile(file);
return toonStorage;
}
}
I don't know why it doesn't work...
I thought Spring boot needed a library related to file upload.
So I added Dependency to pom.xml and added #Bean to Application.java.
However, the same error occurs.
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
#SpringBootApplication
//auto convert
#EntityScan(basePackageClasses = {DemoApplication.class, Jsr310JpaConverters.class})
#EnableConfigurationProperties({
FileStorageProperties.class
})
public class DemoApplication {
#PostConstruct
void init(){
TimeZone.setDefault(TimeZone.getTimeZone("UTC"));
}
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
#Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
return factory.createMultipartConfig();
}
#Bean
public MultipartResolver multipartResolver() {
org.springframework.web.multipart.commons.CommonsMultipartResolver multipartResolver = new org.springframework.web.multipart.commons.CommonsMultipartResolver();
multipartResolver.setMaxUploadSize(512000000);
return multipartResolver;
}
}
I've been struggling for four days. I would really appreciate your help.