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.

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

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

Utilizing interpolation for a CSS class defined in an external file within Angular 2

Is it feasible to send a variable to a CSS class in an external CSS file within Angular 2, such as: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty ...

Error: The current call does not match any existing overloads - TypeScript, NextJS, styled-components

I'm facing an issue while trying to display icons in the footer of my website. The error message "Type error: No overload matches this call" keeps appearing next to my StyledIconsWrapper component, causing Vercel deployment to fail. Despite this error ...

What is the best way to retrieve the current complete URL in a Next.js/Typescript component?

I'm working on a component and I need to retrieve the current full URL. Here's a simplified version of what I have: /** * Share dropdown component */ export const ShareDropdown: React.FC<{ className: string }> = ({ className, }) => { ...

Tips for avoiding Angular routing when clicking on a Bootstrap tab link

I'm working on creating a bootstrap tab, but I'm running into an issue. Every time I click on the tab links, angular seems to be handling its own routing and redirecting me to a different route. What I really want is for the tab content to open u ...

Modifying a Component's Value in its Template Based on an IF Condition in Angular 6

How can I display or hide the 'separator-container' based on a specific condition in the row data? The condition to satisfy is mentioned as "myConditionCheck" in the 5th line of code. I attempted to achieve this by using "isWarningSeperatorVisib ...

Exploring the world of AWS Amplify Cognito in Angular through thorough unit

Just started diving into unit testing and decided to tackle adding test coverage for my current app. Struggling with writing the unit test cases for a specific service within an AWS file. import { Injectable } from '@angular/core'; import { Behav ...

Updating a component's value in Angular 6 when there is a change in the corresponding service

My objective sounds straightforward, but I am struggling to implement it: I want one of my components to automatically update when a variable in a service changes. To illustrate my issue, consider the following example: Imagine having a service that incr ...

What is the best way to determine if a user is connected to the internet using Angular2?

Is there a way to check for internet connectivity in Angular 2 when hitting an API? Sometimes, the user may be offline when accessing the server through the app. Are there specific status codes or methods to determine internet connectivity? Note: I came a ...

To use the npm generator-ionic installation, make sure to have yo@>=1.0.0 installed in your

While attempting to set up generator-ionic, I encountered the following fatal error: EPEERINVALID <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375052595245564358451a5e5b565c575b6f1d54585459">[email protected]</a&g ...

A guide to identifying web crawlers for search engine optimization with the help of Express

I have been on the lookout for npm packages to assist me in detecting crawlers, but all I find are outdated and unmaintained ones that rely on obsolete user-agent databases. Is there a dependable and current package available that can aid me in this task? ...

Searching for details regarding a particular version of a scoped npm package

Querying meta information for a particular version of an NPM package can be done successfully using the following format: GET https://registry.npmjs.org/<name>/<version> For instance: https://registry.npmjs.org/camelcase/2.1.1 However, when ...

The Framework of Storing Data in Angular 2

Embarking on a new project for a corporate client, I find myself in the initial stages of making fundamental architectural decisions. While my background lies with .NET applications, WPF and Flash, this new venture requires web delivery, leading me to cons ...

Require that the parent FormGroup is marked as invalid unless all nested FormGroups are deemed valid - Implementing a custom

Currently, I am working on an Angular 7 project that involves dynamically generating forms. The structure consists of a parent FormGroup with nested FormGroups of different types. My goal is to have the parentForm marked as invalid until all of the nested ...

Webpack fails to load or resolve dependencies for npm packages imported via git

Recently, I started using gulp-starter and encountered an issue while including a private npm package called "Pigeon" from a GIT repository. Despite successfully installing the package with all its dependencies in the node_modules directory, I faced diffic ...

Is it acceptable to incorporate NPM packages alongside Composer in a Laravel PHP project?

Would it be acceptable to incorporate and utilize NPM for JS libraries in addition to composer within the laravel framework, given that laravel dependency already includes composer? Appreciate your insights. ...

Guide on implementing ES6 script's template literals

I've been tackling a template literal question on hackerrank. It's working smoothly on my local IDE, but encountering an error on the Hackerrank IDE. Here's the code to add two numbers and print the result using a template literal: const sum ...

Tips for including extra items in a JSON String using Angular 2

function execute(req:any): any { var stReq = JSON.stringify(req); // Adding additional item "Cityname": "angular2City" inside req req.Cityname = 'angular2City'; } Now, how can I include the additional item "Cityname": "angular2C ...

Can Gulp be configured to work in a distributed manner?

Let me walk you through my plan: I aim to create a node package that includes: gulpfile.js All necessary gulp plugins, tasks, and configurations. To implement this node package (referred to as "my-gulp" henceforth) into an Angular app (referred to ...

Development process of Node Package Manager (npm) peerDependencies

Scenario: Module models Contains common mongoose models used in various applications Requires peerDependencies: "mongoose" Module app Depends on "mongoose", "models" Linked with models using app> npm link models Challenge: During development of ...

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when c ...