georgeOsdDev/viewer.html

## viewer.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.638.0.min.js"></script>
  </head>
  <body>
    S3Bucket: <input class='field' id='s3bucket' type='text' value='xxxx' required/></br>
    accessKeyId: <input class='field' id='accessKeyId' type='text' value='yyyy' required/></br>
    secretAccessKey: <input class='field' id='secretAccessKey' type='text' value='zzzz' required/></br>
    YYYY/MM/DD/hh/mm
    <input class='field' id='year' type='text' value='2020' placeholder='year'  required/>/
    <input class='field' id='month' type='text' value='03' placeholder='month 01-12'  required/>/
    <input class='field' id='day' type='text' value='12' placeholder='day 01-31' required/>/
    <input class='field' id='hour' type='text' value='14' placeholder='hour 01-23' required/>

    <br/>
    <button id='btn1' type='button'>Go</button>
    <button id='btn2' type='button'>Reset</button>
    <hr>
    <div id="viewer" />
    <script>
      const keys = [];
      document.querySelectorAll('input.field').forEach(el => {
        keys.push(el.id);
      });

      // A utility function to create HTML.
      function getHtml(template) {
        return template.join('\n');
      }

      // https://stackoverflow.com/questions/48429077/aws-s3-getobject-to-image
      function encode(data){
        const str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
        return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
      }

      function getImages(params) {
        AWS.config.update(
          {
            region: params.region,
            accessKeyId: params.accessKeyId,
            secretAccessKey: params.secretAccessKey,
          }
        );

        // Create a new service object
        const s3 = new AWS.S3({
          apiVersion: '2006-03-01',
          params: {Bucket: params.s3bucket}
        });

        const prefix = [
          params.year,
          params.month,
          params.day,
          params.hour,
          ''
        ].join('/');

        s3.listObjects({Prefix: prefix}, function(err, data) {
          if (err) {
            console.error(err);
            return alert('There was an error listing your albums: ' + err.message);
          } else {
            console.log(data);
            const contents = data.Contents.map(c => c.Key).sort();
            document.getElementById('viewer').innerHTML = '';
            contents.forEach((c) => {
              const p = {
                Bucket: params.s3bucket,
                Key: c
              };
              s3.getObject(p, function(err, data) {
                const li = document.createElement('li');
                if (err) {
                  console.error(err);
                  li.innerHTML = getHtml([
                    c,
                    'Error',
                  ]);
                  document.getElementById('viewer').appendChild(li)
                } else {
                  const img = new Image();
                  img.src = "data:image/png;base64," + encode(data.Body);
                  li.innerHTML = c;
                  li.appendChild(img);
                  document.getElementById('viewer').appendChild(li)
                }
              });
            });
          }
        });
      }

      document.getElementById('btn1').addEventListener('click', () => {
        let isError = false;
        const params = keys.reduce((acc, k) => {
          var val = document.getElementById(k).value;
          acc[k] = val;
          if (!val) {
            isError = true;
            alert('required error' + k);
          }
          return acc;
        }, {})
        if (!isError) {
          getImages(params);
        }
      })
      document.getElementById('btn1').addEventListener('click', () => {
        document.getElementById('viewer').innerHTML = '';
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.638.0.min.js"></script>
	</head>
	<body>
	S3Bucket: <input class='field' id='s3bucket' type='text' value='xxxx' required/></br>
	accessKeyId: <input class='field' id='accessKeyId' type='text' value='yyyy' required/></br>
	secretAccessKey: <input class='field' id='secretAccessKey' type='text' value='zzzz' required/></br>
	YYYY/MM/DD/hh/mm
	<input class='field' id='year' type='text' value='2020' placeholder='year' required/>/
	<input class='field' id='month' type='text' value='03' placeholder='month 01-12' required/>/
	<input class='field' id='day' type='text' value='12' placeholder='day 01-31' required/>/
	<input class='field' id='hour' type='text' value='14' placeholder='hour 01-23' required/>

	<br/>
	<button id='btn1' type='button'>Go</button>
	<button id='btn2' type='button'>Reset</button>
	<hr>
	<div id="viewer" />
	<script>
	const keys = [];
	document.querySelectorAll('input.field').forEach(el => {
	keys.push(el.id);
	});

	// A utility function to create HTML.
	function getHtml(template) {
	return template.join('\n');
	}

	// https://stackoverflow.com/questions/48429077/aws-s3-getobject-to-image
	function encode(data){
	const str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
	return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
	}

	function getImages(params) {
	AWS.config.update(
	{
	region: params.region,
	accessKeyId: params.accessKeyId,
	secretAccessKey: params.secretAccessKey,
	}
	);

	// Create a new service object
	const s3 = new AWS.S3({
	apiVersion: '2006-03-01',
	params: {Bucket: params.s3bucket}
	});

	const prefix = [
	params.year,
	params.month,
	params.day,
	params.hour,
	''
	].join('/');

	s3.listObjects({Prefix: prefix}, function(err, data) {
	if (err) {
	console.error(err);
	return alert('There was an error listing your albums: ' + err.message);
	} else {
	console.log(data);
	const contents = data.Contents.map(c => c.Key).sort();
	document.getElementById('viewer').innerHTML = '';
	contents.forEach((c) => {
	const p = {
	Bucket: params.s3bucket,
	Key: c
	};
	s3.getObject(p, function(err, data) {
	const li = document.createElement('li');
	if (err) {
	console.error(err);
	li.innerHTML = getHtml([
	c,
	'Error',
	]);
	document.getElementById('viewer').appendChild(li)
	} else {
	const img = new Image();
	img.src = "data:image/png;base64," + encode(data.Body);
	li.innerHTML = c;
	li.appendChild(img);
	document.getElementById('viewer').appendChild(li)
	}
	});
	});
	}
	});
	}

	document.getElementById('btn1').addEventListener('click', () => {
	let isError = false;
	const params = keys.reduce((acc, k) => {
	var val = document.getElementById(k).value;
	acc[k] = val;
	if (!val) {
	isError = true;
	alert('required error' + k);
	}
	return acc;
	}, {})
	if (!isError) {
	getImages(params);
	}
	})
	document.getElementById('btn1').addEventListener('click', () => {
	document.getElementById('viewer').innerHTML = '';
	});
	</script>
	</body>
	</html>