Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

467
Views
Encoding issue while downloading file from s3 in reactjs using pre-signed URL

I'm trying to download a csv file present in my s3 bucket using a pre-signed url that I'm getting from my back-end server. I'm able to download the entire file but at the last row I'm getting some junk characters

This is the csv file I'm getting after download

sepal_length,sepal_width,petal_length,petal_width,species
6.9,3.1,5.4,2.1,virginica
6.7,3.1,5.6,2.4,virginica
6.9,3.1,5.1,2.3,virginica
6.8,3.2,5.9,2.3,virginica
6.7,3.3,5.7,2.5,virginica
6.7,3.0,5.2,2.3,virginica
6.3,2.5,5.0,1.9,virginica
6.5,3.0,5.2,2.0,virginica
6.2,3.4,5.4,2.3,virginica
5.9,3.0,5.1,1.8,virginica
MÏoKó  ×Ô]ü°

As you can see the file is getting appended with some garbage values (probably because of some encoding issue)

When I run the file command on my terminal I get

file Download.csv 
>>>
Download.csv: data

I'm using two mutations, one will fetch the presigned url and other will download file from s3.

useGetPresignedDowloadUrl.mutate(
(some_string),
{
    onSuccess: (data, variables, context) => {
        const s3Data = data as {requestUrl: string, headers: any}
        downloadExecutionOutputFromS3.mutate(
            ({requestUrl: s3Data.requestUrl as string, headers: s3Data.headers}),
            {
                onSuccess: (data, variables, context) => {
                    download(data as Blob, "Downloaded.csv")
                }
            }
        )
    },
}
)

Inside the downloadExecutionOutputFromS3 mutation I'm using the following async function

s3DownloadRequest = async function (url, headers) {
    // url and headers coming from backend
    const response = await fetch(url, {method: 'GET', headers: headers})
    return response.blob()
}

And my download function looks like

function download(blob: Blob, filename: string) {
    let newBlob = new Blob([blob], {type: 'text/plain'});
    const url = window.URL.createObjectURL(newBlob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!