Sending a pdf file to a server through post request

Question

I've got a pdf upload section for users on my front end and from there I'd like to send it to an s3 bucket via a micro-service I've created. I have a post route on my micro-service that expects the file but when I send it from the front-end it comes through empty. I'm definitely missing something when it comes to sending the file from the front-end.

export class FileUpload {
   private file: File;

   constructor(
      private service: FileService;
   ) { }

   uploadFile(): void {
      const formdata = new FormData();
      formdata.append('pdf-file', this.file);

      this.service.upload(formdata).subscribe(uploaded => {
         console.log(uploaded);
      }
   }
}

export class FileService {
   constructor(private http: HttpClient) { }

   public upload(file) {
      const headers = new HttpHeaders({'Content-Type': 'multipart/form-data'});

      return this.http.post('http://myserviceurl/file', file, {headers: headers}).pipe(
         catchError(err => {
            return error;
         });  
   }
}

The file variable inside FileUpload class is the user uploaded pdf file. I'm a bit stuck on working out what I need to do with the file before I can send it via http request. Any help would be greatly appreciated.

What does your html file look like? In your upload method, where is the "headers" variable defined and what does that look like? — CarlitosJan, Aug 12 '21 at 08:51

score 0 · Accepted Answer · answered Aug 12 '21 at 09:48

You code looks good. But, we should understand on how we are expecting the file in the backend.

I believe, the file or the file object doesn't need any changes. You just have to send the file as a form data.

Below is a code snippet on uploading a file in angular as a form data, and getting it in Spring Boot.

Angular snippet (for uploading a file as a form data):

uploadPdfFile(event) {
  const pdfFiles = event.target.files;
  const pdfFile = pdfFiles.item(0);

  const formdata: FormData = new FormData();
  formdata.append('pdfFile', pdfFile); // Should match the parameter name in backend

  this.http.post<any>('http://localhost:8088/file', formdata).subscribe(
  (data) => {
    console.log('Upload File ' + data);
  },
  (error) => {
    console.error(error.error);
  });
}

Backend MicroService (SpringBoot) for fetching the file in params:

@PostMapping(path = "file")
public String uploadPdfFile(@RequestParam("pdfFile") MultipartFile pdfFile) {
    // TODO: Save the file
    // TODO: Upload to S3
    return "done";
}

References for more understanding:

I think I understand why a FormData object is required now, but even after using FormData and changing my headers to 'Content-Type': 'multipart/form-data' it is still ending up as an empty object {} when received by the service. (I have update the original code show to show how it now looks) — SkinnyBetas, Aug 13 '21 at 05:17
@SkinnyBetas I would suggest you to test the API once (with Postman) and confirm whether the backend part is working fine. Once we are sure about that, we can proceed with debugging the frontend code. — Arutsudar Arut, Aug 16 '21 at 14:12

score 0 · Answer 2 · answered Aug 12 '21 at 09:51

Use FormData to upload files in angular.

// create object of FormData

const formData = new FormData();

// add values in the FormData

formData.Append("key","value");

and then call your method by passing FormData object as a parameter.

uploadFile(): void {
  this.service.upload(formData).subscribe(uploaded => {
     console.log(uploaded);
  }

}

Sending a pdf file to a server through post request

2 Answers2