Angular help how to submit a file via HTTP Post

Question

I need some assistance in trying to figure out what I'm missing trying to send a pdf/file from angular to my backend via form-data and I am having some issues doing so I am getting errors when submit is pressed via POST (error and code attached). I would appreciate any assistance!

component.ts

handleFileInput(file: File) {
this.fileToUpload = file;
}

basicUpload(files: File){
var formData = new FormData();
formData.append('file', files)

this.execSummaryUploadService.upload(formData)
 .subscribe(event => {  
})
}

HTML <div class="form-group"> <label for="file">Choose File</label> <input type="file" id="file" (change)="handleFileInput($event.target.files)"> <button mat-fab color="primary" (click)="basicUpload()">Send</button> </div>

Upload Service

constructor(private http: HttpClient) { }

public upload(formData) {
 return this.http.post<any>(this.URL, formData, {
   reportProgress: true,
   observe: 'events'
 });
}

ERROR

 core.js:15714 ERROR HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request"

This is a response error from your backend server. How are you handling this request on the server? — Optimus Pette
– Optimus Pette, Commented May 15, 2020 at 13:19
I am using java spring-boot and it works in Postman when I pass in form-data with the file and API Post @RequestMapping( value = "execSummary/upload", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE ) — Rob DePietro
– Rob DePietro, Commented May 15, 2020 at 13:30
have you tried adding a Content-Type header on the request. const headers = new HttpHeaders({'Content-Type': 'multipart/form-data'}); return this.http.post<any>(this.URL, formData, { headers, reportProgress: true, observe: 'events' });` — Optimus Pette
– Optimus Pette, Commented May 15, 2020 at 13:57
I just tried and got status: 500, error: "Internal Server Error", message: "Failed to parse multipart servlet request; nested … rejected because no multipart boundary was found", — Rob DePietro
– Rob DePietro, Commented May 15, 2020 at 14:24

Radik · Accepted Answer · 2020-05-15 18:43:03Z

2

get a single file from the event

  <input #file type="file"
         id="file"
         (change)="handleFileInput($event)">
  <button (click)="upload()">UPLOAD</button>

    export class AppComponent  {

      @ViewChild('file', { static: true }) fileInput: ElementRef;
      fileToUpload: File;

      constructor(private uploadService: UploadService) {
      }

      handleFileInput(event) {
        const fileList: FileList = event.target.files;
        console.log(fileList);
        if (fileList.length > 0) {
          const file: File = fileList[0];
          this.fileToUpload = file;
        }
      }

      public upload() {
        return this.uploadService.upload(this.fileToUpload)
          .pipe(
            finalize(() => {
              this.fileInput.nativeElement.value = null;
            })
          )
          .subscribe(() => {
          });
      }
    }

you can try upload service as follow

  @Injectable()
  export class UploadService {
    constructor(private http: HttpClient) {
    }

    upload(data: File) {
      let url = '';

      const content = new FormData();
      if (data !== null && data !== undefined) {
        content.append("file", data, "file");
      }

      let options : any = {
        body: content,
        observe: "response",
        responseType: "blob",           
        headers: new HttpHeaders({
          "Accept": "application/json"
        })
      };

      return this.http.request("post", url, options);
    }
  }

some example but it tied to .net backend maybe not match to yours

edited May 15, 2020 at 18:43

answered May 15, 2020 at 14:03

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob DePietro Over a year ago

Thank you for the help @Radik, where are you using the public upload() in the .ts file that actually calls the service?

Radik Over a year ago

@RobDePietro upload used as button click handler, i update my answer.

Rob DePietro Over a year ago

Okay that's what I thought, just wanted to make sure. Looks like everything is working and its communicating with the backend properly. I appreciate all your help.

Collectives™ on Stack Overflow

Angular help how to submit a file via HTTP Post

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related