mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
119 lines
4.3 KiB
HTML
119 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Uppy – AWS S3 upload example</title>
|
||
<link href="./uppy.min.css" rel="stylesheet" />
|
||
<style>
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||
h1 { color: #1269cf; }
|
||
details { margin: 20px 0; }
|
||
summary { cursor: pointer; font-weight: bold; padding: 10px; background: #f5f5f5; border-radius: 4px; }
|
||
.description { margin: 10px 0; color: #555; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>AWS S3 upload example</h1>
|
||
<p>Demonstrates the <code>@uppy/aws-s3</code> plugin with two signing modes.</p>
|
||
|
||
<details open name="uppy">
|
||
<summary>Sign on the client (STS credentials)</summary>
|
||
<p class="description">
|
||
Uses <code>getCredentials</code> to fetch temporary STS credentials from
|
||
<code>/s3/sts</code>. The browser signs all S3 requests locally using SigV4.
|
||
</p>
|
||
<div id="uppy-sts"></div>
|
||
</details>
|
||
|
||
<details name="uppy">
|
||
<summary>Sign on the server (presigned URLs)</summary>
|
||
<p class="description">
|
||
Uses <code>signRequest</code> to call <code>/s3/presign</code> for each S3
|
||
operation. The server generates presigned URLs; the browser uses them directly.
|
||
</p>
|
||
<div id="uppy-sign"></div>
|
||
</details>
|
||
|
||
<noscript>You need JavaScript to run this example.</noscript>
|
||
<script type="module">
|
||
import { Uppy, Dashboard, AwsS3, GoldenRetriever } from './uppy.min.mjs'
|
||
|
||
function onUploadComplete(result) {
|
||
console.log('Upload complete!', result.successful)
|
||
}
|
||
function onUploadSuccess(file, data) {
|
||
console.log('Upload success:', file.meta.name, data)
|
||
}
|
||
function onUploadError(file, error) {
|
||
console.error('Upload error:', file?.meta?.name, error)
|
||
}
|
||
|
||
// Mode 1: Client-side signing with STS credentials
|
||
{
|
||
const uppy = new Uppy({ debug: true })
|
||
.use(Dashboard, {
|
||
inline: true,
|
||
target: '#uppy-sts',
|
||
height: 400,
|
||
})
|
||
.use(AwsS3, {
|
||
s3Endpoint: `https://${window.UPPY_S3_BUCKET}.s3.${window.UPPY_S3_REGION}.amazonaws.com`,
|
||
region: window.UPPY_S3_REGION,
|
||
getCredentials: async ({ signal }) => {
|
||
const response = await fetch('/s3/sts', { signal })
|
||
if (!response.ok) throw new Error('Failed to get credentials')
|
||
const data = await response.json()
|
||
return {
|
||
credentials: {
|
||
accessKeyId: data.credentials.AccessKeyId,
|
||
secretAccessKey: data.credentials.SecretAccessKey,
|
||
sessionToken: data.credentials.SessionToken,
|
||
expiration: data.credentials.Expiration,
|
||
},
|
||
region: data.region,
|
||
}
|
||
},
|
||
})
|
||
.use(GoldenRetriever)
|
||
|
||
uppy.on('complete', onUploadComplete)
|
||
uppy.on('upload-success', onUploadSuccess)
|
||
uppy.on('upload-error', onUploadError)
|
||
}
|
||
|
||
// Mode 2: Server-side signing with presigned URLs
|
||
{
|
||
const uppy = new Uppy({ debug: true })
|
||
.use(Dashboard, {
|
||
inline: true,
|
||
target: '#uppy-sign',
|
||
height: 400,
|
||
})
|
||
.use(AwsS3, {
|
||
bucket: window.UPPY_S3_BUCKET,
|
||
region: window.UPPY_S3_REGION,
|
||
signRequest: async (request) => {
|
||
const response = await fetch('/s3/presign', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
method: request.method,
|
||
key: request.key,
|
||
uploadId: request.uploadId,
|
||
partNumber: request.partNumber,
|
||
contentType: request.contentType,
|
||
}),
|
||
})
|
||
if (!response.ok) throw new Error('Failed to get presigned URL')
|
||
return response.json()
|
||
},
|
||
})
|
||
.use(GoldenRetriever)
|
||
|
||
uppy.on('complete', onUploadComplete)
|
||
uppy.on('upload-success', onUploadSuccess)
|
||
uppy.on('upload-error', onUploadError)
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|