Encountering an issue with the 'createObjectURL' function in URL, resulting in overload resolution failure when using npm file-saver

While working on my angular app, I encountered a situation where I needed to download user details uploaded as a Word document to my local machine using the angular app. Successfully, I was able to upload and save this data to my database, getting its byte[] data on the client side.

To perform the save action on the client's machine within my angular app, I utilized npm i file-saver. However, an error started appearing in the console whenever I tried to execute the saving process.

https://i.sstatic.net/j5nTJ.png

The console output of my result after making a GET call to the API looked something like this:

https://i.sstatic.net/u4jIS.png

I attempted to use result.blob without success. Does anyone have any ideas?

In search of a solution, I came across mentions that this functionality has been removed from the current version of Chrome. How can I work around this issue?

UPDATE

Two changes were made:

Firstly, I modified my TypeScript code as follows:

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

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

Now, the file downloads as a .pdf. However, upon trying to open the file, I encountered a "failed to load" error :/

Referencing my request header, it appears as follows:

   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' });

Answer №1

Substitute

 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');
  }

Next steps:

The provided code is specifically for handling pdf files. If you need to retrieve the file name, consider adding a content-disposition tag in the backend response headers and extract it on the client side.

Refer to this link for more information on content-disposition and its importance.

Answer №2

It is uncertain whether this information significantly relates to the question at hand. In my personal experience, I encountered instances where the name of the PDF contained an illegal character, specifically a comma. This led to a failure in an API call with the following Status:

(failed) net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION  

Subsequently, this triggered the following error message:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Script for client side socket communication using NodeJS and SocketIO

After successfully installing socket.io with the npm command: npm install --save socket.io I have properly configured my server and am now facing the task of setting up the client side. To utilize the socket.io library on the client, I need to import it. ...

Calculate the variance in days between two dates and assign the result to a separate field

I am working with two date fields, one labeled Commencement Date and the other as Expiration Date. Objective: The goal is to calculate the difference in days between the selected commencement and expiration dates (expirationDate - commecementDate) and ...

Having trouble using the npm command line to install packages

I've been utilizing npm in conjunction with Ionic for a while now. Lately, I've been encountering an error message whenever I attempt to install packages or modules. Surprisingly, the same issue arises when working with React Native. Despite att ...

What are the best scenarios for creating a constructor in Angular 2 using Typescript?

Check out these sample constructors I found in the Angular 2 documentation: export class AppComponent implements OnInit { title = 'Tour of heroes'; heroes: Hero[]; selectedHero: Hero; constructor(private heroService: HeroService ...

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

What is the reason behind Rollup flagging code-splitting issues even though I am not implementing code-splitting?

In my rollup.config.js file, I have only one output entry defined as follows: export default { input: './src/Index.tsx', output: { dir: './myBundle/bundle', format: 'iife', sourcemap: true, }, plugins: [ ...

Error: npm unable to locate private module

Recently, I started incorporating npm private modules into my workflow but encountered difficulty retrieving the module within my code. The module is successfully deployed on npmjs and can be installed without issue; however, my require statement is faili ...

Setting up default QueryParamsHandling in Angular

I have successfully developed an angular 9 application and implemented localization using @ngx-translate. To ensure that the app changes locale based on the 'lang' query parameter, I configured it accordingly. @Component({ selector: 'app- ...

Error in file @angular/service-worker/src/module.d.ts at line 30, character 9: The type 'ModuleWithProviders' is not a generic type

https://i.sstatic.net/01bwW.pngI have successfully integrated "angular-push-notifications" into my angular-4 project by following the instructions from the link below: I have configured the "Service Workers" as shown below 1. Install the package using np ...

The type '[Images]' cannot be assigned to type 'string'

I am attempting to pass an array of objects through props, but encountered the following error: (property) images: [Images] Type '[Images]' is not assignable to type 'string'.ts(2322) ProductBlock.tsx(4, 5): The expected type co ...

Obtain the precise Discriminated conditional unions type in the iterator function with Typescript

export type FILTER_META = | { type: 'string'; key: string; filters: { id: string; label?: string }[]; } | { type: 'time'; key: string; filters: { min: string; max: string }[]; } | { ...

Minimize NPM Memory Consumption

While trying to run npm install on a server, I am encountering memory issues. The server only has 2GB of RAM, which is below Node's default 4GB limit. Despite having a modest package.json file with just around a dozen packages, the process exhausts al ...

Error loading ngsw-worker.js in Angular 7

Issue An app that utilizes a Service Worker is experiencing problems. The app was recently upgraded from Angular 6.1 to version 7. Upon uploading the updated files to the server, an error message is displayed: https://i.sstatic.net/B7uPf.png Error Det ...

Develop an Angular application with a customized URL path that utilizes a ServiceWorker

I am currently working on an Angular 10 application. It utilizes the Angular "service worker" to transform into a PWA. Once the app is compiled, it resides in "c:\-website-folder-\ng-app\dist". Users can access the app through a URL like: ...

Personalize ng-multiselect-dropdown in order to establish connections with multiple model fields

Is there a way to customize the ng-multiselect-dropdown control in order to include a CodeField? This would be helpful for persisting model values during selection. ...

Switch up the build folder destination in ReactJS on Windows

In package.json, I specify the absolute location of the build folder in the following way: "scripts":{ "build": "set BUILD_PATH=C:/Tomcat/webapps && react-scripts build", ... } Upon executing the npm run build com ...

What is the best way for me to examine [...more] closely?

import * as Joi from 'joi'; import 'joi-extract-type'; const schema = { aaaaaaa: Joi.number() .integer() .positive() .allow(null), bbbbbb: Joi.number() .integer() .positive() .all ...

Encountering a Svelte 500 error while trying to implement Flowbite-svelte-icons

I have encountered a frustrating issue with error 500 when trying to reference the flowbite-svelte-icons. Despite going through the installation process multiple times to make sure nothing was overlooked, I am still facing this roadblock. I am unable to ...

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

NPM - Issue: Module '../' not found

I'm currently going through the documentation for hapi-auth-cookie and attempting to run a sample server. Here's the process I followed: 1. Inserted the sample server code in server.js 2. Initialized npm with 'npm init' 3. Ran the se ...