1

i want to send make a file upload, i am using angular in the front and spring boot in the backend.I have parameters to send in the request and the byte array in the body.but when i send this i got error 400.

this is my backend

@PostMapping(path=Urls.UPLOAD_FILE_IN_LIBELLE_GDA, produces = { MediaType.APPLICATION_JSON_VALUE})
    public void uploadFileInLibelleGda(
            @RequestParam String processus,
            @RequestParam String level0Name,
            @RequestParam String nomFichier,
            @RequestParam String nomLibelle,
            @RequestParam String anneeFolderName,
            @RequestParam String semaineFolderName,
            @RequestBody ByteArrayResource fichier) throws Exception {

        uploadService.uploadFileInLibelleGda(racine, processus,level0Name,nomLibelle, anneeFolderName, semaineFolderName, nomFichier,  fichier.getByteArray());
    }

and this is my frontend

  public uploadFiles(
        nomFichier: string,
        nomLibelle: string,
        processus: string,
        level0Name: string,
        semaineFolderName: string,
        anneeFolderName: string,
        byte: Blob
    ): Observable<any> {

        let params = new HttpParams();

        params.append('level0Name', level0Name);
        params.append('processus', processus);
        params.append('nomLibelle', nomLibelle);
        params.append('anneeFolderName', anneeFolderName);
        params.append('semaineFolderName', semaineFolderName);
        params.append('nomFichier', nomFichier);


        return this.httpClient.post(this.urlUploadFile, byte, {

            'params': params
        });
    }
1
  • You need to use FormData instead of HttpParams Commented Oct 31, 2019 at 10:11

2 Answers 2

1

For MultiPart FileUpload spring already provides RequestPart use that.

@RequestParam relies on type conversion via a registered Converter or PropertyEditor while RequestPart relies on HttpMessageConverters taking into consideration the 'Content-Type' header of the request part. RequestParam is likely to be used with name-value form fields.

https://docs.spring.io/spring/docs/current/javadoc- api/org/springframework/web/bind/annotation/RequestPart.html

Use that @RequestPart (value="uploadFile") MultipartFile fichier in Spring Rest Service

 let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new HttpHeaders();
    /** In Angular 5, including the header Content-Type can invalidate your request */
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    let params = new HttpParams();

params.append('level0Name', '1');
params.append('processus', '1');
params.append('nomLibelle', '1');
params.append('anneeFolderName', '1');
params.append('semaineFolderName', '1');
params.append('nomFichier', '1');

    this.httpClient.post(this.resourcePrefix+'/user/upload', formData,  { headers: headers, params: params})

        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )
}
Sign up to request clarification or add additional context in comments.

Comments

0

Try below code.

Angular Service

public uploadFiles(
        nomFichier: string,
        nomLibelle: string,
        processus: string,
        level0Name: string,
        semaineFolderName: string,
        anneeFolderName: string,
        byte: Blob
    ): Observable<any> {

        // headers
        let headers = new HttpHeaders();
        headers.append('Content-Type', 'multipart/form-data');
        let httpRequestHeaders = new HttpRequest({ headers: headers });

        // body data
        let params = new FormData(); 
        params.append('level0Name', level0Name);
        params.append('processus', processus);
        params.append('nomLibelle', nomLibelle);
        params.append('anneeFolderName', anneeFolderName);
        params.append('semaineFolderName', semaineFolderName);
        params.append('nomFichier', nomFichier);
        params.append('fichier', bytes);

        return this.httpClient.post(this.urlUploadFile, params, httpRequestHeaders);
    }

Spring Controller

@PostMapping(path=Urls.UPLOAD_FILE_IN_LIBELLE_GDA, produces = { MediaType.APPLICATION_JSON_VALUE})
    public void uploadFileInLibelleGda(
            @RequestParam String processus,
            @RequestParam String level0Name,
            @RequestParam String nomFichier,
            @RequestParam String nomLibelle,
            @RequestParam String anneeFolderName,
            @RequestParam String semaineFolderName,
            @RequestParam("fichier") MultipartFile fichier) throws Exception {

        uploadService.uploadFileInLibelleGda(racine, processus,level0Name,nomLibelle, anneeFolderName, semaineFolderName, nomFichier,  fichier.getByteArray());
    }

7 Comments

See my updated answer, Use MultipartFile instead of ByteArrayResource for "fichiers" attribute.
i did that but no way
it works when i pass it as param but no as requstbody
Yeah try this @RequestParam("fichier") MultipartFile fichier
Yeah It will mapped once you passed your file as a form data in request body from angular, see my angular code. I have passed my form-data obj params to the request body.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.