Getting Failed to execute 'createObjectURL' on 'URL': Overload resolution failed with npm file-saver

Question

I was developing a angular app to download user details which were uploaded as word document to my local machine using my angular app.

I was successfully able to upload it and save it to my DB and i was also able to get its data as byte[] in my client side result.

I was using npm i file-saver to perform save in client machine in my angular app. But when i try to do it, i am getting this error in my console

and my result's console output looks like this after GET call to API

and using this code to save

   saveAs(result, name+'_resume.pdf');

I tried it with result.blob but still no luck. any idea guys?

In some of the post i saw like

It's just been removed from the current version of Chrome so how do i overcome this?

UPDATE

I did two things

I changed my typescript code to

    this.dataservice.getResume(method, id).subscribe(blob => {
    const file = new Blob([blob], { type: 'application/pdf' });

    saveAs(file, name+'_resume.pdf');

Now the file is getting downloaded as .pdf. But when i try to open the file, i m getting failed to load error :/

Please see my request header

   let headers = new HttpHeaders()
  .set('Authorization', 'Bearer ' +
    this.securityService
      .securityObject.bearerToken);

   return this.http.get(environment.baseApiUrl + methodName + id, { headers: headers , observe: 'response', responseType: 'blob' });

I want to see the headers you are passing while making the request for the pdf from the server, can you please post the code of get request and the headers — nobalG, Jan 03 '21 at 19:45

nobalG · Accepted Answer · 2021-01-04T16:25:56.307

6

Replace

 this.dataservice.getResume(method, id).subscribe(blob => {
    const file = new Blob([blob], { type: 'application/pdf' });

    saveAs(file, name+'_resume.pdf');

with

 this.dataservice.getResume(method, id).subscribe(blob => {
   saveAs(blob.body, name+'_resume.pdf');
  }

For the next steps:

The above code will work for pdf files only, for getting the file name,you may have to add a tag on the backend for the response headers called as content-dispostion, and read that on your client side

See here for more about content-disposition and why you may need it

edited Jan 04 '21 at 16:25

answered Jan 04 '21 at 12:14

nobalG

4,544
3
34
72

Nobal blob.body missed that was the issue, so in our app we are using two types of docs, one is word document and another one is pdf. So in that case when we download .doc documents as pdf by using the above approach will that cause any issue, like formatting issues? or do i need to handle it like we did just now for pdf? – Nithin Paul Jan 05 '21 at 13:22
yes it will cause the issue, because as you can see in your function, right now every file is getting saved as xyz_resume.pdf, so you need to make this thing dynamic. You have to pass the complete name of the file from the server(I have pasted the link in answer) in the content-disposition header while responding to request of getFile, and set that name in saveAs(blob.body,fileName) on client side.... – nobalG Jan 05 '21 at 14:03
Ok Nobal i will try in that way, thanks for your help – Nithin Paul Jan 05 '21 at 14:30
Nobel incase if i want to retrieve my class object, i got it my typescript, in the result, i have byte array, filename and file type, so to do the download in that case // var fileName = resume.resumeName; // var fileType = resume.resumeType; // const file = new Blob([resume.Resume], { type: fileType }); // saveAs(file, fileName); will it work? – Nithin Paul Jan 06 '21 at 09:09
I tried the above approach but pdf is not generating correctly, any thoughts on this? – Nithin Paul Jan 06 '21 at 09:13
for handling filenames and extensions, I was unable to achieve the functionality without content-disposition header, however for more info on this, I request you to open a new question, may be someone have achieved the desired functionality as expected by you and will guide you – nobalG Jan 06 '21 at 09:25
Nobel please check this new one https://stackoverflow.com/questions/65593490/read-file-and-its-properties-from-api-and-download-it-in-angular-client – Nithin Paul Jan 06 '21 at 09:49

score 0 · Answer 2 · answered Apr 05 '21 at 20:19

Not sure this has too much of a bearing on this question. However in my case the name of the pdf would sometimes have an illegal character in it, specifically a comma, which caused an api call failure with the Status:

 (failed) net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION

Which then triggered the:

Failed to execute 'createObjectURL' on 'URL': Overload resolution...

Getting Failed to execute 'createObjectURL' on 'URL': Overload resolution failed with npm file-saver

2 Answers2

Linked