1

I am trying to combine multiple pdf's in angular 8. On selecting the multiple files via upload button, now I have the selected pdf's in a filelist or array. I want to merge the pdf's into single PDF document with some name before sending the combined pdf file to the upload API post method.

html code:

 <input #fileInput type="file" ngf-select ng-model="new_files" accept=".pdf" multiple
                        (change)="onFileChange($event)">
                    <span class="btn btn-primary"><i class="fas fa-upload"></i> Upload PDF(s)
                    </span>

.ts code

public onFileChange(event) {  
let files = event.target.files;          
if (event.target.files && event.target.files.length) {
  const [file] = event.target.files;
  const fileListAsArray = Array.from(event.target.files)
  console.log(fileListAsArray);     

  this.fileService.upload(file).subscribe(
    (result: any) => {         
     .loading = false;
      this.isSuccess = true;
      this.successMessage = 'uploaded successfully !!.';
    },
    (error) => {
      this.loading = false;
      console.error(error);
    });
}

}

How can I send the below result to ASP.net core post web api call so that I can handle the pdf merge functionality on the server side.

filelist:

(2) [File, File] [0: File {name: "Test.pdf", lastModified: 1606692735736, lastModifiedDate: Mon Nov 30 2020 10:32:15 GMT+1100, webkitRelativePath: "", size: 30420, …}]

[1: File {name: "test1.pdf", lastModified: 1604532330799, lastModifiedDate: Thu Nov 05 2020 10:25:30 GMT+1100, webkitRelativePath: "", size: 1417916, …}]

Jarvis
  • 91
  • 1
  • 7
  • This is something you'll want to do on the server, there aren't good tools for manipulating pdfs in js. If you really want to do it in browser, it looks like this library might work https://github.com/nbesli/pdf-merger-js – BobtheMagicMoose Nov 30 '20 at 23:05
  • Yeah..I tried with this library and couldn't achieve the results, How should I pass this multiple files arrays to the post api if I want to do the merging on server side? – Jarvis Dec 01 '20 at 02:30
  • Those are implementation details you'll need to work out. It depends on how your server would accept the files etc. https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api will help if you have modern browser support. Otherwise you can use jquery or other techniques to send POST data. – BobtheMagicMoose Dec 01 '20 at 15:15

0 Answers0