File upload not working using generated client code

Question

I have got a simple input for selecting a file from the local drive:

<input type="file" (change)="onUpload($event)" required/>

After selecting a file, I want to upload it to my server.

For this I am using actually a generated client which exposes the interface:

// Generated Client Code

// .. file.d.ts
export interface File {
    file?: Blob;
}

// .. rest-client.d.ts

postTrack(file, observe = 'body', reportProgress = false) {
    if (file === null || file === undefined) {
        throw new Error('Required parameter file was null or undefined when calling postTrack.');
    }
    let queryParameters = new HttpParams({ encoder: this.encoder });
    if (file !== undefined && file !== null) {
        queryParameters = queryParameters.set('file', file);
    }
    let headers = this.defaultHeaders;
    // to determine the Accept header
    const httpHeaderAccepts = [
        'multipart/form-data'
    ];
    const httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    if (httpHeaderAcceptSelected !== undefined) {
        headers = headers.set('Accept', httpHeaderAcceptSelected);
    }
    return this.httpClient.post(`${this.configuration.basePath}/api/tracks`, null, {
        params: queryParameters,
        withCredentials: this.configuration.withCredentials,
        headers: headers,
        observe: observe,
        reportProgress: reportProgress
    });
}

The upload looks like this:

onUpload(event) {
  this.uploadAndProgress(event.target.files);
}

uploadAndProgress(files: File[]) {

  // Method 1 - Pass file object directly
  const file = files[0];

  // Method 2 - Append file object to FormData     
  const file = new FormData();
  file.append('file', files[0]);

  this.apiGateway.postTrack(file, 'events',true)
    .subscribe((event) => {
      if (event.type === HttpEventType.UploadProgress) {
        this.percentDone = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        this.uploadSuccess = true;
      }
    });
}

However, it is not working as the POST reqest URL looks like this: https://localhost:8443/api/tracks?file=%5Bobject%20Object%5D (for Method 1 and Method 2) and I am getting this response:

{
  "timestamp": "2020-01-25T22:16:27.727+0000",
  "status": 500,
  "error": "Internal Server Error",
  "message": "Current request is not a multipart request",
  "trace": "org.springframework.web.multipart.MultipartException: Current request is not a multipart request\n...",
  "path": "/api/tracks"
}

On the server side I am having this endpoint which is currently responsible for storing that file elsewhere:

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
public @ResponseBody
String postTrack(
        @RequestParam("file") MultipartFile file,
        RedirectAttributes redirectAttributes
) {
    storageService.store(file);
    redirectAttributes.addFlashAttribute("message",
            "You successfully uploaded " + file.getOriginalFilename() + "!");

    return "redirect:/";
}

I am not quite sure what exactly I have to do to make this work.

I'm pretty sure the issue is that I am supposed to send the file as a Blob. However, I couldn't find a way to transform the File object to a Blob.

@YanivAmrami I replaced the interface definition with the actual implementation. — Stefan Falk, Jan 26 '20 at 09:03

Stefan Falk · Accepted Answer · 2020-05-04T07:04:00.633

It turns out the issue came from the generated code (see github issue).

To sum it up:

@RequestParam is not yet supported but will be starting with the next release of

springdoc-openapi 1.2.29

Also note that consumes is not supported:

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})

instead I had to add @ApiResponse like this:

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ApiResponse(description = "Successful Operation", responseCode = "200", content = @Content(mediaType = MediaType.MULTIPART_FORM_DATA_VALUE))

The generated TypeScript client code looks now like this:

postTrack(file, observe = 'body', reportProgress = false) {
    let headers = this.defaultHeaders;
    // to determine the Accept header
    const httpHeaderAccepts = [
        'multipart/form-data'
    ];
    const httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    if (httpHeaderAcceptSelected !== undefined) {
        headers = headers.set('Accept', httpHeaderAcceptSelected);
    }
    // to determine the Content-Type header
    const consumes = [
        'multipart/form-data'
    ];
    const canConsumeForm = this.canConsumeForm(consumes);
    let formParams;
    let useForm = false;
    let convertFormParamsToString = false;
    // use FormData to transmit files using content-type "multipart/form-data"
    // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
    useForm = canConsumeForm;
    if (useForm) {
        formParams = new FormData();
    }
    else {
        formParams = new HttpParams({ encoder: this.encoder });
    }
    if (file !== undefined) {
        formParams = formParams.append('file', file) || formParams;
    }
    return this.httpClient.post(`${this.configuration.basePath}/api/tracks`, convertFormParamsToString ? formParams.toString() : formParams, {
        withCredentials: this.configuration.withCredentials,
        headers: headers,
        observe: observe,
        reportProgress: reportProgress
    });
}

File upload not working using generated client code

1 Answers1