|
|
@@ -7,12 +7,9 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>AWS upload example</h1>
|
|
|
- <h2>AWS S3 (non multipart)</h2>
|
|
|
- <div id="aws-non-multipart"></div>
|
|
|
- <h2>AWS S3 multipart</h2>
|
|
|
- <div id="aws-multipart"></div>
|
|
|
+ <div id="uppy"></div>
|
|
|
<script type="module">
|
|
|
- import { Uppy, Dashboard, AwsS3Multipart, AwsS3 } from "https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs"
|
|
|
+ import { Uppy, Dashboard, AwsS3 } from "https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs"
|
|
|
/**
|
|
|
* This generator transforms a deep object into URL-encodable pairs
|
|
|
* to work with `URLSearchParams` on the client and `body-parser` on the server.
|
|
|
@@ -40,17 +37,28 @@
|
|
|
// You'd also have to add `Content-Type` header with value `application/json`.
|
|
|
}
|
|
|
{
|
|
|
+ const MiB = 0x10_00_00;
|
|
|
+
|
|
|
const uppy = new Uppy()
|
|
|
.use(Dashboard, {
|
|
|
inline: true,
|
|
|
- target: "#aws-non-multipart",
|
|
|
+ target: '#uppy',
|
|
|
})
|
|
|
.use(AwsS3, {
|
|
|
+ // Files that are more than 100MiB should be uploaded in multiple parts.
|
|
|
+ shouldUseMultipart: (file) => file.size > 100 * MiB,
|
|
|
+
|
|
|
+ // ========== Non-Multipart Uploads ==========
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This method tells Uppy how to handle non-multipart uploads.
|
|
|
+ * If for some reason you want to only support multipart uploads,
|
|
|
+ * you don't need to implement it.
|
|
|
+ */
|
|
|
async getUploadParameters (file) {
|
|
|
// Send a request to our Express.js signing endpoint.
|
|
|
const response = await fetch('/sign-s3', {
|
|
|
method: 'POST',
|
|
|
- // Send and receive JSON.
|
|
|
headers: {
|
|
|
accept: 'application/json',
|
|
|
},
|
|
|
@@ -69,30 +77,20 @@
|
|
|
return {
|
|
|
method: data.method,
|
|
|
url: data.url,
|
|
|
- fields: data.fields, // For presigned PUT uploads, this should be left empty.
|
|
|
+ fields: {}, // For presigned PUT uploads, this should be left empty.
|
|
|
// Provide content type header required by S3
|
|
|
headers: {
|
|
|
'Content-Type': file.type,
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
- });
|
|
|
-
|
|
|
- uppy.on('complete', (result) => {
|
|
|
- console.log('Upload complete! We’ve uploaded these files:', result.successful)
|
|
|
- })
|
|
|
-
|
|
|
- uppy.on('upload-success', (file, data) => {
|
|
|
- console.log('Upload success! We’ve uploaded this file:', file.meta['name'])
|
|
|
- })
|
|
|
- }
|
|
|
- {
|
|
|
- const uppy = new Uppy()
|
|
|
- .use(Dashboard, {
|
|
|
- inline: true,
|
|
|
- target: "#aws-multipart",
|
|
|
- })
|
|
|
- .use(AwsS3Multipart, {
|
|
|
+
|
|
|
+ // ========== Multipart Uploads ==========
|
|
|
+
|
|
|
+ // The following methods are only useful for multipart uploads:
|
|
|
+ // If you are not interested in multipart uploads, you don't need to
|
|
|
+ // implement them (you'd also need to set `shouldUseMultipart: false` though).
|
|
|
+
|
|
|
async createMultipartUpload(file, signal) {
|
|
|
if (signal?.aborted) {
|
|
|
const err = new DOMException('The operation was aborted', 'AbortError')
|
|
|
@@ -202,7 +200,7 @@
|
|
|
const data = await response.json()
|
|
|
|
|
|
return data
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
uppy.on('complete', (result) => {
|
Antoine du Hamel