title: Typescript: Load file data as Blob
body: <p>I am trying to load a file in angular7/typescript, to fulfill the following function:</p>
  
  <pre><code>public add3dModel(input?: Blob, observe?: 'body', reportProgress?: boolean): Observable&lt;string&gt;;
  public add3dModel(input?: Blob, observe?: 'response', reportProgress?: boolean): Observable&lt;HttpResponse&lt;string&gt;&gt;;
  public add3dModel(input?: Blob, observe?: 'events', reportProgress?: boolean): Observable&lt;HttpEvent&lt;string&gt;&gt;;
  public add3dModel(input?: Blob, observe: any = 'body', reportProgress: boolean = false ): Observable&lt;any&gt; {
  
      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', &lt;any&gt;input) || formParams;
      }
  
      return this.httpClient.put&lt;string&gt;(`${this.basePath}/backend/model`,
          convertFormParamsToString ? formParams.toString() : formParams,
          {
              withCredentials: this.configuration.withCredentials,
              headers: headers,
              observe: observe,
              reportProgress: reportProgress
          }
      );
  }
  </code></pre>
  
  <p>This function is auto generated using the <code>swagger-codegen</code> for typescript.</p>
  
  <p>The HTML I am using:</p>
  
  <pre><code>&lt;input type="file" (change)="get3DModel($event)"&gt;
  </code></pre>
  
  <p>This is the function called on change:</p>
  
  <pre><code>get3DModel(e) {
    this._3dmodel_local = e.target.files[0];
  }
  </code></pre>
  
  <p>Now after a button is pressed(which works) I'd like to upload the selected file using the <code>add3dModel</code>-function.</p>
  
  <p>The code I've tried for this(inside the button's function):</p>
  
  <pre><code>  var r = new FileReader();
    r.onload = (e) =&gt;{
      this.add3dModel(r.result) //obviously doesn't work
    }
    r.readAsArrayBuffer(this._3dmodel_local);
  </code></pre>
  
  <p>And</p>
  
  <pre><code>this.add3dModel(this._3dmodel_local);
  </code></pre>
  
  <p>Where both times my server returns a <code>400 Bad Request</code> with the internal message <code>No file present</code></p>
  
  <p>What am I doing wrong?</p>
  
  <p>To clarify: My goal is loading a local file and uploading it to the Server.</p>
  
  <p>Following is the Backend Sourcecode, it's a Spring-boot project.</p>
  
  <p>Auto-generated API-code</p>
  
  <pre><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&lt;String&gt; add3dModel(@ApiParam(value = "file detail") @Valid @RequestPart("file") MultipartFile input) {
      return new ResponseEntity&lt;&gt;(HttpStatus.NOT_IMPLEMENTED);
  
  }
  </code></pre>
  
  <p>Child-class:</p>
  
  <pre><code>    @Override
  public ResponseEntity&lt;String&gt; add3dModel(@Valid MultipartFile formData){
      return ResponseEntity.ok(service.add3dModel(formData)); //using JPA repository
  }
  </code></pre>
  
  <p>Before even hitting the <code>add3dModel</code>-method, I get the following error:</p>
  
  <pre><code>Mapped to public org.springframework.http.ResponseEntity&lt;java.lang.String&gt; 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&lt;java.lang.String&gt; 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&lt;java.lang.Object&gt; 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]
  </code></pre>