How to download file from AWS S3 using getObject in Reactjs?

Question

I'm trying to download files from an S3 bucket into .csv format directly from the client side using React. I've been able to upload files no problem, and even list all files in the bucket but am having trouble using getObject to actually download a file. The files I want are held within a templates folder, so when one is selected from dropdown, the Key in my params is changed and will grab that particular file.

I have tried using Blob to take the data.Body that is received from calling getObject on the specific bucket and file itself, but am having issues where some of the files don't download or it works on Mac OS but not on Windows, or doesn't work on Firefox but works in Chrome or vice versa.

I'm wondering if there is an easy way to do this using solely React? Taking the data received from the file and converting it to .csv?

This is my Downloads.js file, using React Bootstrap as a dropdown menu to be able to select a particular file name:

import React, { useState } from 'react';
import { ListGroup, Dropdown } from 'react-bootstrap';
import AWS from 'aws-sdk';

const InputDownload = () => {
  const [template, setTemplate] = useState('Choose Template');

  AWS.config.update({
    accessKeyId: process.env.REACT_APP_ACCESS_ID,
    secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  });

  const handleDownload = () => {
    const s3 = new AWS.S3();

    const params = {
      Bucket: process.env.REACT_APP_INTERNAL_BUCKET_NAME,
      Key: `templates/${template}`,
    };

    s3.getObject(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        console.log(data.Body.toString();
      }
    });

}

  return (
    <>
      <form className='bg-white my-4'>
        <Dropdown>
          <Dropdown.Toggle variant='secondary' id='dropdown-basic'>
            {template}
          </Dropdown.Toggle>

          <Dropdown.Menu>
            <Dropdown.Item onSelect={() => setTemplate('T1')}>
              T1</Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('IV1')}>
              IV1
            </Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('IV2')}>
              IV2
            </Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('DV1')}>
              DV1
            </Dropdown.Item>
            
          </Dropdown.Menu>
        </Dropdown>
        <input
          type='submit'
          value='Download'
          className='btn btn-primary btn-block mt-3'
          onClick={handleDownload}
        />
      
      </form>
    </>
  );
};

export default InputDownload;

Any help would be greatly appreciated!

What is your goal here? Is it to read the contents of the file so your React app can use that content in some way, or is it to actually download the file to the user's computer? Is there a server-side component to this app that can make AWS API calls on behalf of the client? — jarmod
– jarmod, Commented Mar 10, 2021 at 14:31
Thanks for your reply. The goal is for the user on the client side to be able to download the file in csv format. I actually figured out how to do this in the end using Blob but was having issues due to certain features being deprecated. I will answer this myself now, many thanks though! — Asher
– Asher, Commented Mar 11, 2021 at 13:51

Pavlov Serhiy · Accepted Answer · 2021-03-10 14:30:26Z

5

I’m highly recommending doing this on server side for security reasons.Because after build process for your react project in node environment will be executed, all your environment variables would be directly set as a strings on your client, where everybody can access them(accessKeyId and secretAccessKey).

The client(browser or any other environment) doen't have the access to your server's environment, and that's why you're passing those variables at the process of build.

The server, in other hand, has direct access to the machine, where it's running, that's why using environment variables on server side in secure.

edited Mar 10, 2021 at 14:30

answered Mar 10, 2021 at 14:24

Pavlov Serhiy

3241 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asher Over a year ago

Thanks for the heads up, noted and appreciate the advice!

Oo-_-oO Over a year ago

If anyone would like to know, we can use aws's PreSignedGetUrl in backend to generate a secure URL to download the file directly in front end.

Amr Omar · Accepted Answer · 2021-08-05 18:55:29Z

2

You can do it like that but you may use Axios in ReactJS

new Observable((observer) => {
      var xhr = new XMLHttpRequest();
      xhr.open("get", fileURL, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (xhr.readyState === 4) {
          observer.next(xhr.response);
          observer.complete();
        }
      };
      xhr.send();
    }).subscribe((blob: any) => {
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = elem.material.driverUrl;
      link.click();
    });

answered Aug 5, 2021 at 18:55

Amr Omar

5657 silver badges14 bronze badges

Comments

Dharman · Accepted Answer · 2021-03-11 14:01:56Z

1

For anyone else who may want to do this in future directly from the client side, I was able to implement this by using Blob to convert the data into a Blob URL and then running the function when Download is clicked.

My InputDownload file from above now looks like this:

import React, { useState } from 'react';
import { ListGroup, Dropdown } from 'react-bootstrap';
import AWS from 'aws-sdk';

const InputDownload = () => {
  const [template, setTemplate] = useState('Choose Template');

  AWS.config.update({
    accessKeyId: process.env.REACT_APP_ACCESS_ID,
    secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  });

const handleClick = (e) => {
    e.preventDefault();
  };

  const handleDownload = () => {
    const s3 = new AWS.S3();

    const params = {
      Bucket: process.env.REACT_APP_INTERNAL_BUCKET_NAME,
      Key: `templates/${template}`,
    };


    function downloadBlob(blob, name = `${template}.csv`) {
      // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
      const blobUrl = URL.createObjectURL(blob);
      // Create a link element
      const link = document.createElement('a');
      // Set link's href to point to the Blob URL
      link.href = blobUrl;
      link.download = name;
      // Append link to the body
      document.body.appendChild(link);
      // Dispatch click event on the link
      // This is necessary as link.click() does not work on the latest firefox
      link.dispatchEvent(
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      );

      // Remove link from body
      document.body.removeChild(link);
    }

    s3.getObject(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        let csvBlob = new Blob([data.Body.toString()], {
          type: 'text/csv;charset=utf-8;',
        });
        downloadBlob(csvBlob, `${template}`);
      }
    });

}

  return (
    <>
      <form className='bg-white my-4' onSubmit={handleClick}>
        <Dropdown>
          <Dropdown.Toggle variant='secondary' id='dropdown-basic'>
            {template}
          </Dropdown.Toggle>

          <Dropdown.Menu>
            <Dropdown.Item onSelect={() => setTemplate('T1')}>
              T1</Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('IV1')}>
              IV1
            </Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('IV2')}>
              IV2
            </Dropdown.Item>
            <Dropdown.Item onSelect={() => setTemplate('DV1')}>
              DV1
            </Dropdown.Item>
            
          </Dropdown.Menu>
        </Dropdown>
        <input
          type='submit'
          value='Download'
          className='btn btn-primary btn-block mt-3'
          onClick={handleDownload}
        />
      
      </form>
    </>
  );
};

export default InputDownload;

edited Mar 11, 2021 at 14:01

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 11, 2021 at 13:56

Asher

3153 gold badges9 silver badges23 bronze badges

3 Comments

Manoj Over a year ago

I am trying to download a pdf file using this approach. but when I open the downloaded file I says "failed to load PDF document"

Dylan Pierce Over a year ago

Please don't do this method. You're exposing your AWS keys on the client side. Use a pre-signed GET from the server side then expose that URL to your frontend. Then the frontend doesn't have access to your AWS keys, but permission to download the file from the pre-signed GET URL.

Justin Duncan Jan 29 at 19:14

You really should be creating a presigned url on the backend to get the file. this will work but it's not ideal for security reasons, or save it in a public bucket

Collectives™ on Stack Overflow

How to download file from AWS S3 using getObject in Reactjs?

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related