Angular 4 multipart form with null parameters

Question

Hello guys i am having a problem on posting a multipart form-data on an Angular 4.3 + Spring Boot Rest app. Whatever i put as parameter in the Java method i get the message "Required request part 'arquivo' is not present" or "Required request parameter 'arquivo' is not present".

Here is part of the form code:

<form (ngSubmit)="onFormSubmit()" [formGroup]="formulario" enctype="multipart/form-data">
          <div formGroupName="sumarizacao">
            <div class="row">

       <!-- Nome da sumarização -->
              <div class="form-group col-sm-3">
                <label for="summarizationName">*Nome da Sumarização</label>
                <input type="text" class="form-control" id="summarizationName" formControlName="nome" placeholder="Nome">
                <div *ngIf="formulario.controls['sumarizacao'].controls['nome'].errors && formulario.controls['sumarizacao'].controls['nome'].dirty"><small> Campo obrigatório</small></div>
              </div>

  <!-- control file upload -->
            <div class="form-group col-sm-9">
              <label class="form-control-label custom-submit" id="controlFileLabel" for="envio-arquivo-ctl">Arquivo de controle</label>
              <i class="fa fa-check-circle" aria-hidden="true" *ngIf="file != null"></i>
              <div>
                <input type="file" id="envio-arquivo-ctl" (change)="fileEvent($event)" accept=".ctl">
                <div *ngIf="file != null"><p>{{file.name}}</p></div>
                <div *ngIf="formulario.controls['arquivo'].name != '' && formulario.controls['arquivo'].dirty"><small> Campo obrigatório</small></div>
              </div>
            </div>
         </div>
          <button type="submit" class="btn btn-sm btn-primary" [disabled]="formulario.invalid"><i class="fa fa-check" aria-hidden="true"></i> Gravar</button>
          <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Resetar</button>
        </form>

Post method:

  salvarSumarizacao(formGroup: FormGroup): Observable<Sumarizacao> {
    let formData = new FormData();
    let header = new HttpHeaders().set('enctype', 'multipart/form-data').set('Accept', 'application/json');
    formData.append('sumarizacao', JSON.stringify(formGroup.value.sumarizacao));
    if (formGroup.value.arquivo !== '') {
      formData.append('arquivo', formGroup.value.arquivo, formGroup.value.arquivo.name);
    }
    return this.http.post(URIConstantes.SUMARIZACAO, formData, { headers: header })
      .map(resp => resp as Sumarizacao)
      .catch(this.handleErrorObservable)
  }

When I print the formData or formGroup, it looks fine, all data are over there, but it seems like when it gets on backend it crashes.

 @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA)
    @Produces({MediaType.APPLICATION_JSON})
    public Response incluir(@RequestParam(value="arquivo") MultipartFile arquivo, @RequestParam(value = "sumarizacao") Sumarizacao sumarizacao, HttpServletRequest request) {
        ObjectMapper mapper = new ObjectMapper();
        //sumarizacao = mapper.readValue(request.getParameter("sumarizacao"), Sumarizacao.class);
        //Sumarizacao sumRetorno = sumarizacaoService.incluir(sumarizacao, arquivo.getInputStream());
        RetornoResourceDTO<Sumarizacao> retornoResourceDTO = RetornoResourceDTO.<Sumarizacao> criarComResultado(new Sumarizacao());
        adicionarMensagemSucesso(retornoResourceDTO);
        return Response.ok(retornoResourceDTO).build();

    }

When i put HttpServletRequest as a parameter, it gives me null multiPartfiles and MultipartParametersName
When i put the parameter (@RequestBody String test), the 'test' string gives me the whole request body (all the form data and file data as string, including the boundaries)
When i post to http://httpbin.org/post, it works and the response i get is: enter image description here

I've tried with @RequestPart, @RequestParam and on both, it shows me the "Required param/part is not present". I also tried with @FormDataParam and the object came null. :(

Ivan Arantes Ivan Arantes · Accepted Answer · 2017-09-15T12:29:51

I got it working with MultipartHttpServletRequest parameter and CommonMultipartResolver bean.

    @Bean
    public CommonsMultipartResolver commonsMultipartResolver() {
        final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
        commonsMultipartResolver.setMaxUploadSize(-1);
        return commonsMultipartResolver;
    }


@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA, produces = MediaType.APPLICATION_JSON)
    public Response incluir(MultipartHttpServletRequest http) { }

I use Spring Boot 1.5.3, Spring Security 3.2.10 and Spring Core 4.3.8

Angular 4 multipart form with null parameters

1 Answers