Typescript: Load file data as Blob

Question

I am trying to load a file in angular7/typescript, to fulfill the following function:

public add3dModel(input?: Blob, observe?: 'body', reportProgress?: boolean): Observable<string>;
public add3dModel(input?: Blob, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<string>>;
public add3dModel(input?: Blob, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<string>>;
public add3dModel(input?: Blob, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {

    let headers = this.defaultHeaders;

    // authentication (oauth) required
    if (this.configuration.accessToken) {
        let accessToken = typeof this.configuration.accessToken === 'function'
            ? this.configuration.accessToken()
            : this.configuration.accessToken;
        headers = headers.set('Authorization', 'Bearer ' + accessToken);
    }

    // to determine the Accept header
    let httpHeaderAccepts: string[] = [
        'application/json'
    ];
    let httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    if (httpHeaderAcceptSelected != undefined) {
        headers = headers.set("Accept", httpHeaderAcceptSelected);
    }

    // to determine the Content-Type header
    let consumes: string[] = [
        'multipart/form-data'
    ];

    const canConsumeForm = this.canConsumeForm(consumes);

    let formParams: { append(param: string, value: any); };
    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: new CustomHttpUrlEncodingCodec()});
    }

    if (input !== undefined) {
        formParams = formParams.append('input', <any>input) || formParams;
    }

    return this.httpClient.put<string>(`${this.basePath}/backend/model`,
        convertFormParamsToString ? formParams.toString() : formParams,
        {
            withCredentials: this.configuration.withCredentials,
            headers: headers,
            observe: observe,
            reportProgress: reportProgress
        }
    );
}

This function is auto generated using the swagger-codegen for typescript.

The HTML I am using:

<input type="file" (change)="get3DModel($event)">

This is the function called on change:

get3DModel(e) {
  this._3dmodel_local = e.target.files[0];
}

Now after a button is pressed(which works) I'd like to upload the selected file using the add3dModel-function.

The code I've tried for this(inside the button's function):

  var r = new FileReader();
  r.onload = (e) =>{
    this.add3dModel(r.result) //obviously doesn't work
  }
  r.readAsArrayBuffer(this._3dmodel_local);

And

this.add3dModel(this._3dmodel_local);

Where both times my server returns a 400 Bad Request with the internal message No file present

What am I doing wrong?

To clarify: My goal is loading a local file and uploading it to the Server.

Following is the Backend Sourcecode, it's a Spring-boot project.

Auto-generated API-code

@ApiOperation(value = "add new 3D Model", nickname = "add3dModel", notes = "", response = String.class, authorizations = {
    @Authorization(value = "oauth", scopes = {
        @AuthorizationScope(scope = "admin", description = "admin rights")
        })
}, tags={ "glassesBackend", })
@ApiResponses(value = { 
    @ApiResponse(code = 201, message = "created", response = String.class),
    @ApiResponse(code = 400, message = "bad request"),
    @ApiResponse(code = 401, message = "unauthorized"),
    @ApiResponse(code = 404, message = "not found") })
@ApiImplicitParams({
})
@RequestMapping(value = "/backend/model",
    produces = { "application/json" }, 
    consumes = { "multipart/form-data" },
    method = RequestMethod.PUT)
default ResponseEntity<String> add3dModel(@ApiParam(value = "file detail") @Valid @RequestPart("file") MultipartFile input) {
    return new ResponseEntity<>(HttpStatus.NOT_IMPLEMENTED);

}

Child-class:

    @Override
public ResponseEntity<String> add3dModel(@Valid MultipartFile formData){
    return ResponseEntity.ok(service.add3dModel(formData)); //using JPA repository
}

Before even hitting the add3dModel-method, I get the following error:

Mapped to public org.springframework.http.ResponseEntity<java.lang.String> controller.backend.GlassesBackendController.add3dModel(org.springframework.web.multipart.MultipartFile)
           | 2019-01-20 12:38:06.584 DEBUG 8 --- [tp1374066265-14] .w.s.m.m.a.ServletInvocableHandlerMethod : Could not resolve parameter [0] in public org.springframework.http.ResponseEntity<java.lang.String> controller.backend.GlassesBackendController.add3dModel(org.springframework.web.multipart.MultipartFile): Required request part 'file' is not present
           | 2019-01-20 12:38:06.599 DEBUG 8 --- [tp1374066265-14] .m.m.a.ExceptionHandlerExceptionResolver : Using @ExceptionHandler public final org.springframework.http.ResponseEntity<java.lang.Object> org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler.handleException(java.lang.Exception,org.springframework.web.context.request.WebRequest) throws java.lang.Exception
           | 2019-01-20 12:38:06.608 DEBUG 8 --- [tp1374066265-14] o.s.w.s.m.m.a.HttpEntityMethodProcessor  : No match for [application/json], supported: []
           | 2019-01-20 12:38:06.629 DEBUG 8 --- [tp1374066265-14] .m.m.a.ExceptionHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

score 0 · Answer 1 · answered Jan 19 '19 at 21:19

I've created a stackblitz example where input type=file is working, the only thing that is missing in my sample is the upload request. Try to build your request object this way.

If your backend is waiting a multipart/form-data you must use it as Content-Type instead of application/json. Don't forget to append your Authorization token in the request header:

let fileList: FileList = event.target.files;
if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new Headers();
    /** In Angular 5, including the header Content-Type can invalidate your request */

    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Bearer ' + accessToken);

    let options = new RequestOptions({ headers: headers });
    this.http.post(`${this.apiEndPoint}`, formData, options)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )
}

That still doesn't work. The request to the server still doesn't have any data that's in the file. — Meik Vtune, Jan 20 '19 at 09:58
I've added some of the backend controller code, I hope that those are the right portions. — Meik Vtune, Jan 20 '19 at 13:24

Typescript: Load file data as Blob

1 Answers1