How can I extract the file name from a FileStreamResult when making a request with Ajax or Axios?

Question

How can I extract the file name from a FileStreamResult when making a request with Ajax or Axios?

Currently, in my asp.net core api controller, I have the following code snippet:

 return new FileStreamResult(excel, "application/ms-excel")
        {
            FileDownloadName = filename
        };

Afterwards, I make an ajax request to fetch this file:

   var response = axios.get(
      `/endpoint`, {
        responseType: 'blob'
      });

Once the response is received, I utilize a library named download. This library requires 3 parameters, one of which is called "filename". Is there a way for me to extract and use the filename provided by the server?

download(response.data,"test.xlsx", content);

Regarding Cors:

 services.AddCors(options => options.AddPolicy("Cors",
       builder =>
       {
           builder.AllowAnyOrigin()
           .AllowAnyMethod()
           .AllowAnyHeader();
       }));

javascript ajax asp.net-core axios filestreamresult

Answer 1

Answer №1

To start, ensure that you configure your CORS settings to expose the Content-Disposition header as it is not automatically included in the list of CORS-safelisted response headers

services.AddCors(options => options.AddPolicy("Cors",
    builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .WithExposedHeaders("Content-Disposition");
    }));

Once set up, you can then extract the file name from the response's Content-Disposition header

axios.get(
    "/endpoint", {
        responseType: 'blob'
    })
    .then(response => {
        var contentDisposition = response.headers["content-disposition"];
        var match = contentDisposition.match(/filename\s*=\s*"(.+)"/i);
        var filename = match[1];
        console.log(filename);
    });

Answer 2

To start, ensure that you configure your CORS settings to expose the Content-Disposition header as it is not automatically included in the list of CORS-safelisted response headers

services.AddCors(options => options.AddPolicy("Cors",
    builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .WithExposedHeaders("Content-Disposition");
    }));

Once set up, you can then extract the file name from the response's Content-Disposition header

axios.get(
    "/endpoint", {
        responseType: 'blob'
    })
    .then(response => {
        var contentDisposition = response.headers["content-disposition"];
        var match = contentDisposition.match(/filename\s*=\s*"(.+)"/i);
        var filename = match[1];
        console.log(filename);
    });

How can I extract the file name from a FileStreamResult when making a request with Ajax or Axios?

Answer №1

Similar questions

Utilizing jQuery to load form(s), submit data via POST method, and fetch results without refreshing the

Unable to execute multiple queries within a CloudCode query

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

What is the best way to pass data from an async whilst function to an express.js res.send() statement?

Putting off the execution of jQuery scripts

Is it possible to refresh the dom without causing any disruptions to the Mouse Cursor?

Utilize JSON data from a service to populate a Bootstrap Modal

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

methods for converting an array to JSON using javascript

Performing an AJAX request to a form within a CSS modal

Implementing TypeScript in an Asp.net Core ReactJS application`s configuration

jQuery-powered web application, experiencing compatibility issues when deployed on Windows Server 2003 and Internet Explorer

HTML drag-and-drop setDragImage fails to show ghost image on initial drag operation

Retrieve the value of an object without relying on hardcoded index values in TypeScript

I encounter difficulties using my static resources in the root route of my Express.js application

Convert a fresh Date() to the format: E MMM dd yyyy HH:mm:ss 'GMT'z

Is there an issue with the initial positioning of the tooltip in the seiyria angular-bootstrap slider?

Determining the lowest and highest values for a slider's range

Can someone break down the meaning of "returning $http.post" in Angular while developing a factory service?

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?