How to get filename from response - reactJs: Content-Disposition

Question

I'm downloading a file from a server. There I'm setting a file name which I would like to read on a frontend. Here is how I'm doing it on server:

attachment; filename*=utf-8'ru-ru'%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D1%8B%20%D1%80%D0%B0%D1%81%D1%87%D0%B5%D1%82%D0%B0%20%D1%81%D1%82%D0%BE%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8%20%D0%BE%D0%B1%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%87%D0%BD%D0%BE%D0%B9%20%D1%81%D0%BA%D0%B2%D0%B0%D0%B6%D0%B8%D0%BD%D1%8B%2C%20%D1%81%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BA%D0%BE%D0%B9.xlsx

response

public async getSingleWellCostDocumentData(
    vid: string,
  ): Promise<{ fileName: string; blob: Blob }> {
    const token = await this.identity!.getToken();

    try {
      const response = await fetch(
        `${this.baseApiUrl}/${this.projectId}/download_file?type=${vid}`,
        {
          method: 'GET',
          mode: 'cors',
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (response.ok) {
        const blob = await response.blob();
        const contentType = response.headers.get('Content-Type')!;

        const fileName = response.headers
          .get('content-disposition')!
          .split('filename*=')[1];

        console.log('fileName', fileName);

        return {
          fileName,
          blob: new Blob([blob], {
            type: contentType,
          }),
        };
      }
      throw new Error('error');
    } catch (e) {
      throw new Error('');
    }
  }
}

I wanted to get filename like this, but it doesn't work

        const fileName = response.headers
      .get('content-disposition')!
      .split('filename*=')[1]
      .split(';')[0];

    console.log('fileName', fileName)// fileName utf-8'ru-ru'%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D1%8B%20%D1%80%D0%B0%D1%81%D1%87%D0%B5%D1%82%D0%B0%20%D1%81%D1%82%D0%BE%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8%20%D0%BE%D0%B1%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%87%D0%BD%D0%BE%D0%B9%20%D1%81%D0%BA%D0%B2%D0%B0%D0%B6%D0%B8%D0%BD%D1%8B%2C%20%D1%81%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BA%D0%BE%D0%B9.xlsx;

Can you post the header as plain text instead of a screenshot? What result did you get? — Lin Du, Jul 12 '23 at 12:41
see https://stackoverflow.com/questions/40939380/how-to-get-file-name-from-content-disposition — Lin Du, Jul 12 '23 at 12:45
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Jul 12 '23 at 23:24

score 1 · Answer 1 · answered Jul 12 '23 at 13:09

const header = "attachment; filename*=utf-8'ru-ru'%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%D1%8B%20%D1%80%D0%B0%D1%81%D1%87%D0%B5%D1%82%D0%B0%20%D1%81%D1%82%D0%BE%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8%20%D0%BE%D0%B1%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%20%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%87%D0%BD%D0%BE%D0%B9%20%D1%81%D0%BA%D0%B2%D0%B0%D0%B6%D0%B8%D0%BD%D1%8B%2C%20%D1%81%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BA%D0%BE%D0%B9.xlsx"

const matches = header.match(/filename[^;=\n]*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/i);
const filename = decodeURIComponent(matches[3]);

console.log(filename)

How to get filename from response - reactJs: Content-Disposition

1 Answers1