JSFiddle - React, Tailwind, and code Playground

by Chris Watson

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.747.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
  </head>

  <body>
    <form>
      <h2>Enterprise Solution Demo Files Uploader</h2>
      <label>Access Key ID<input type="text" required /></label>
      <label>Secret Access Key<input type="password" required /></label>
      <input type="file" multiple required />
      <button>Upload</button>
    </form>
  </body>

</html>

CSS

html { display: none; }

JavaScript

AWS.config.region = 'eu-central-1';
AWS.config.httpOptions.timeout = 30000;
AWS.config.httpOptions.connectTimeout = 30000;

document.querySelector('form').addEventListener('submit', async event => {
  event.preventDefault();
    
	const accessKeyId = document.querySelector('input[type=text]').value;
	const secretAccessKey = document.querySelector('input[type=password]').value;
	const {files} = document.querySelector('input[type=file]');
  
  AWS.config.credentials = new AWS.Credentials({ accessKeyId, secretAccessKey });
    
  const bucket = new AWS.S3({ params: { Bucket: 'enterprise-solution-demo' } });
  
  const errors = await Promise.all([...files].map(async file => {
    try {
      await bucket.putObject({
        Key: file.name,
        ContentType: file.type,
        Body: file,
        ACL: 'public-read'
      }).promise();
    }
    catch (error) { return { file: file.name, error }; }
  }));
  
  const errorMessage = errors
  	.filter(e => e)
  	.map(e => `${e.file}:\n${e.error}`)
    .join('\n\n');
  
  if (errorMessage.length) { return alert(`Oh shit...\n\n${errorMessage}`); }
  
  alert('All done. YOU\'RE WELCOME.')
}, false);