Skip to content

Instantly share code, notes, and snippets.

@jjeanjacques10
Last active May 5, 2022 00:37
Show Gist options
  • Save jjeanjacques10/030299f8bbbf239b6302df24b836fd35 to your computer and use it in GitHub Desktop.
Save jjeanjacques10/030299f8bbbf239b6302df24b836fd35 to your computer and use it in GitHub Desktop.
Preview file s3 without download it
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Preview file</h1>
<img src="https://aws-us-east-1-416068129208-newsletter-alexa-pipe.s3.amazonaws.com/pokemon.csv" alt="">
<a href="https://aws-us-east-1-416068129208-newsletter-alexa-pipe.s3.amazonaws.com/pokemon.csv"
download>Download</a>
<button id="open">Open</button>
<div id="file-content"></div>
</body>
<script>
const url = "https://aws-us-east-1-000000000000-pokemon-bucket.s3.amazonaws.com/pokemon.csv"
const open = document.getElementById('open')
const fileContent = document.getElementById('file-content')
open.addEventListener('click', () => {
fetch(url, {
mode: 'cors',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
}).then(response => response.blob())
.then(blob => {
const reader = new FileReader()
reader.addEventListener('loadend', () => {
fileContent.innerHTML = reader.result
}
)
reader.readAsText(blob)
}
)
}
)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment