Get File Name From FileStreamResult When Using Ajax/Axios?

Question

I have in my asp.net core api controller

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

I am doing an ajax request to get this file

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

then I am using a library called download which takes 3 parameters with one of them being "filename" and I am wondering if I can somehow get the filename that is coming from the server.

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

Cors

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

Alexander · Answer 1 · 2019-12-12T11:38:57.733

10

First you need to expose Content-Disposition header in your CORS configuration since it's not included in CORS-safelisted response headers

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

Then you should be able to parse response Content-Disposition header and get file name from it

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

edited Dec 12 '19 at 11:38

answered Dec 10 '19 at 21:58

Alexander

9,104
1
17
41

hmm I don't seem to have "content-disposition" header. just content-length, content-type. – chobo2 Dec 10 '19 at 22:15
@chobo2 are you performing cors request? – Alexander Dec 10 '19 at 22:16
Yea a cors request is done before the actual request. – chobo2 Dec 10 '19 at 22:24
@chobo2 Okay, so you have to allow `Content-Disposition` header to be passed. It can be done via cors setup in your project. Please add code with your current `cors` settings I'll try to help with it – Alexander Dec 10 '19 at 22:26
Ok I added Cors code from my startup.cs file but it already "allows all headers" – chobo2 Dec 10 '19 at 23:00
@chobo2 It's a bit different. I've updated my answer – Alexander Dec 11 '19 at 09:17
@chobo2 Any luck with this? – Alexander Dec 13 '19 at 14:44
Hey, did not see the update. I tried it and now the content-dispositon is being passed but the regex is not matching anything. Mine looks like: attachment; filename=CompanyName-CategoryName.xlsx; filename*=UTF-8''CompanyName-CategoryNames.xlsx – chobo2 Dec 13 '19 at 19:23
@chobo2 This is very surpising for me because I got response with double quotes for `filename`. Please try this regex `/filename\s*=\s*(.+);/i` – Alexander Dec 13 '19 at 19:35
1

I'd suggest the regex to be `filename\s*=\s*"?(.+)"?;` to support optional quotation marks. Either with or without quotation mars would be valid. – Oli May 10 '20 at 01:25
This answer should be marked as Accepted. I had the exact same question as the OP, and this answer provided everything to make it work. – Sipke Schoorstra Mar 11 '21 at 12:03

Get File Name From FileStreamResult When Using Ajax/Axios?

1 Answers1