MissingServletRequestPartException: Required request part 'file' is not present

UI Components for React
Post Reply
mozdemir
Posts: 3
Joined: 16 Apr 2018, 23:24

25 Mar 2021, 14:23

Hi gentlemen, ladies,
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]
js file:
----------------------------------------------------------------------

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 )
    {
       ....
    }
}
Maybe you have an advice for me.
Thanks in advance.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests