title: How to download file from AWS S3 using getObject in Reactjs?
body: <p>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 <strong>templates</strong> folder, so when one is selected from dropdown, the Key in my params is changed and will grab that particular file.</p>
  <p>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.</p>
  <p>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?</p>
  <p>This is my Downloads.js file, using React Bootstrap as a dropdown menu to be able to select a particular file name:</p>
  <pre><code>import React, { useState } from 'react';
  import { ListGroup, Dropdown } from 'react-bootstrap';
  import AWS from 'aws-sdk';
  
  const InputDownload = () =&gt; {
    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 = () =&gt; {
      const s3 = new AWS.S3();
  
      const params = {
        Bucket: process.env.REACT_APP_INTERNAL_BUCKET_NAME,
        Key: `templates/${template}`,
      };
  
      s3.getObject(params, (err, data) =&gt; {
        if (err) {
          console.log(err, err.stack);
        } else {
          console.log(data.Body.toString();
        }
      });
  
  }
  
    return (
      &lt;&gt;
        &lt;form className='bg-white my-4'&gt;
          &lt;Dropdown&gt;
            &lt;Dropdown.Toggle variant='secondary' id='dropdown-basic'&gt;
              {template}
            &lt;/Dropdown.Toggle&gt;
  
            &lt;Dropdown.Menu&gt;
              &lt;Dropdown.Item onSelect={() =&gt; setTemplate('T1')}&gt;
                T1&lt;/Dropdown.Item&gt;
              &lt;Dropdown.Item onSelect={() =&gt; setTemplate('IV1')}&gt;
                IV1
              &lt;/Dropdown.Item&gt;
              &lt;Dropdown.Item onSelect={() =&gt; setTemplate('IV2')}&gt;
                IV2
              &lt;/Dropdown.Item&gt;
              &lt;Dropdown.Item onSelect={() =&gt; setTemplate('DV1')}&gt;
                DV1
              &lt;/Dropdown.Item&gt;
              
            &lt;/Dropdown.Menu&gt;
          &lt;/Dropdown&gt;
          &lt;input
            type='submit'
            value='Download'
            className='btn btn-primary btn-block mt-3'
            onClick={handleDownload}
          /&gt;
        
        &lt;/form&gt;
      &lt;/&gt;
    );
  };
  
  export default InputDownload;
  
  </code></pre>
  <p>Any help would be greatly appreciated!</p>