Uploading File To S3

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 :)

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 })
  }

Source

• API Gateway for Uploading
• Base64 encode file with async/await