Danh Was Here

Uploading File to AWS S3 Bucket

April 10, 2020

Uploading a File To S3

Background

I ran across another common problem with my work project: how to upload a file to a private S3 bucket. In only an hour I was able to implement it after finding the exact right resources to learn from :)

How I Did It

The steps involved in the UI side are:

1 - Initialize API Gateway endpoint for uploading (see below link) 2 - Encode the file to Base64

const toBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
const encoding = await toBase64(file).catch(e => console.log(e))
});

3 - Remove the content type heading from the encoding (in this case I am removing the metadata related to the Excel file I am trying to upload)

const b64 = encoding.replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", "")
const content = {
  content: b64
}

4 - Write the AJAX async/async snippet to upload the base64-encoded file

try {
    const res = await fetch(`${process.env.REACT_APP_API_ENDPOINT}/upload`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(content)
    })
    if (res.status === 200) {

      // Using react-toastify to notify user
      toast.success("🎉 Uploaded file successfully!", { autoClose: 5000 })
    }
    const { statusCode } = await res.json()
    return statusCode === 200
  }

  catch (e) {
    // Using react-toastify to notify user
    toast.error('🔥 Upload error.', { autoClose: 5000 })
  }

Sources