I am trying to use FileUpload component.
I am getting this error message and could not find a solution for that;
Code: Select all
Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]
----------------------------------------------------------------------
Code: Select all
<FileUpload id="file" name="file"
customUpload uploadHandler={imageUploadHandler}
mode="basic" accept="image/*" maxFileSize={500000}
chooseLabel="Model Resmi Seçin"
invalidFileSizeMessageDetail="izin verilen en fazla boyut: {0} byte."
invalidFileSizeMessageSummary="{0}: Geçersiz dosya boyutu, "/>
Code: Select all
const imageUploadHandler = ({files}) => {
const [file] = files;
const fileReader = new FileReader();
fileReader.onload = (progressEvent) => {
UploadFilesService.upload("model/image-upload/" + model.modelId,
progressEvent.target.result,
file.name,
(event) => {
setModelImageUploadProgress(Math.round((100 * event.loaded) / event.total));
console.log("modelImageUploadProgress: " + modelImageUploadProgress);
},
toast);
};
fileReader.readAsDataURL(file);
};
Code: Select all
class UploadFilesService {
upload(uri, fileContent, fileName, onUploadProgress, toast) {
let formData = new FormData();
formData.append("file", fileContent);
const defaultHeader = authHeader();
defaultHeader["Content-Type"] = "multipart/form-data";
axios.post(API_URL + uri, formData, {
headers: defaultHeader,
onUploadProgress,
})
.then((response) => {
toast.current.show({severity: 'success', summary: 'Başarılı', detail: response.data.message, life: 3000});
console.log(JSON.stringify(response));
})
.then((files) => {
console.log(JSON.stringify(files));
})
.catch((error) => {
catchError(error, toast);
});
}
}
My backend is based on spring boot and handles request with this method;
Code: Select all
@RequestMapping ( "/api/model" )
public class BrandModelController
{
@PostMapping("/image-upload/{modelId}")
public ResponseEntity<?> uploadImage( @RequestParam("file") MultipartFile file, @PathVariable String modelId )
{
....
}
}
Thanks in advance.