How can I fetch an S3 file with axios in TypeScript while preserving the correct MIME type?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm developing a TypeScript function that downloads a file from S3 using axios and returns a usable File object, but the file doesn't open correctly in the browser due to MIME type issues.

Here's my current attempt:

TYPESCRIPT
export async function urlToFile (url : string, fileName: string) : Promise<File> {
    let file = null
    await axios.get(url).then(response => {
        file = response.data
    })
    return new File([file], fileName)
}

I also found a Stack Overflow solution where a PDF works in the browser, but it requires manually setting the MIME type. Here's that example:

JAVASCRIPT
export function urltoFile(url, filename, mimeType){
    if (url.startsWith('data:')) {
        const arr = url.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[arr.length - 1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        const file = new File([u8arr], filename, {type:mime || mimeType});
        return Promise.resolve(file);
    }
    return fetch(url)
        .then(res => res.arrayBuffer())
        .then(buf => new File([buf], filename,{type:mimeType}));
}

How can I retrieve or infer the correct MIME type from the S3 download URL automatically using axios without manually specifying it?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is one approach to fix your issue. When using axios to fetch binary data (like a PDF from S3), you should set the response type to "blob" so that the response data has the correct binary format and MIME type (assuming S3 returns the proper Content-Type header).

Try something like this:

TYPESCRIPT
export async function urlToFile(url: string, fileName: string): Promise<File> {
  const response = await axios.get(url, { responseType: "blob" });
  const blob = response.data;
  return new File([blob], fileName, { type: blob.type });
}

Explanation

Setting responseType to "blob":
By default, axios may try to interpret data as JSON. Specifying responseType: "blob" tells axios that you expect binary data.
Using blob.type:
The returned blob will have the MIME type as specified in the HTTP response header from S3. This way, you no longer need to manually supply the MIME type.
Creating the File instance:
Constructing the File using the blob ensures that the file data is in the correct binary form and includes the proper MIME type, which allows browsers to handle it correctly (for instance, opening a PDF).

If for any reason S3 does not include a Content-Type header, you might need to manually pass or determine the MIME type elsewhere. Otherwise, this approach should work for most cases.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by InterstellarNavigator974 • 1 month ago

You could specify the response type on your axios request as a blob. The mime type would then be contained in the response header content-type. Modify your code as follows:

TYPESCRIPT
export async function urlToFile(url: string, fileName: string): Promise<File>{
  const response = await axios.get(url, {
    responseType: 'blob'
  });

  const fileData = response.data;
  const mimeType = response.headers['content-type'];
  
  return new File([fileData], fileName, {type: mimeType});
}

No comments yet.

Discussion

No comments yet.

How can I fetch an S3 file with axios in TypeScript while preserving the correct MIME type?

2 Answers

Explanation

Discussion

Similar Posts

How can I fix the 'Missing initializer in const declaration' error in React Native's ActivityIndicator?