example/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>feathers-s3 axample</title>
</head>
<body>
<main id="main" class="container">
<h1>Welcome to feathers-s3</h1>
<input id="file" type="file" />
<button id="upload" onclick="uploadFile()" disabled>Upload file</button>
<button id="download" onclick="downloadFile()" disabled>Download file</button>
</main>
<script src="https://unpkg.com/@feathersjs/client@^5.0.0-pre.28/dist/feathers.js"></script>
<script src="https://unpkg.com/socket.io-client@4.5.3/dist/socket.io.min.js"></script>
<!--script type="module" src="/feathers-s3/client.js"></script-->
<script type="module">
import { getClientService } from '/feathers-s3/client.js'
// Create the client Feathers app
const app = feathers()
// Configure the transport using socket.io
const socket = io('http://localhost:3333')
const transport = feathers.socketio(socket)
app.configure(transport)
// Configure and get the s3 service
const s3Service = getClientService(app, {
transport,
fetch: window.fetch.bind(window),
useProxy: true
})
// listen to the file input in order to disable/enable the buttons
document.getElementById('file').addEventListener('input', (evt) => {
const files = document.getElementById('file').files
if (files.Length > 0) document.getElementById('upload').disabled = true
else document.getElementById('upload').disabled = false
document.getElementById('download').disabled = true
})
// Upload file
window.uploadFile = async () => {
const files = document.getElementById('file').files
if (files.length === 0) return
try {
// upload the selected file
const file = files[0]
const response = await s3Service.upload(file.name, file)
document.getElementById('download').disabled = false
} catch (error) {
console.error(error)
}
}
// Download file
window.downloadFile = async () => {
try {
// download the selected file
const file = document.getElementById('file').files[0]
const response = await s3Service.download(file.name)
// setup an anchor to download the file from the browser
const anchor = document.createElement('a')
anchor.href = URL.createObjectURL(new Blob([ response.buffer ], { type: response.type }))
anchor.download = file.name
document.body.appendChild(anchor)
anchor.click()
} catch (error) {
console.error(error)
}
}
</script>
</body>
</html>