Can Uppy be used to upload to S3-compatible storage via Presigned URL without a server?

Uppy
1

I’m using Tigris storage (an S3-compatible storage service) and I’m looking to understand if UppyJS (In a React/Next.js app) can be used to upload directly from the browser to the storage without a server in-between and without allowing anybody to upload files. I’d generate a presigned upload URL for each authenticated upload and use that to upload.

Is this flow supported by UppyJS in a React/Next.js app?

2

You can use @uppy/aws-s3 for this! Checkout the example.

3

That requires a Node server. I meant uploading directly from the browser to S3. Uploading to S3 directly from the browser is possible using a regular PUT HTTP call and a presignedUrl.

4

Getting a presigned URL can only be done on the server so there is no way around that.

You can look into client signing with getTemporarySecurityCredentials.

5

I know, but getting a presigned URL is a very cheap operation in terms of bandwidth. Uploading a huge binary file through the server is not. That’s why I’m trying to avoid the in-between server for the actual file upload and just upload it from the browser to the S3 storage directly.

I’m not sure that getTemporarySecurityCredentials which expects an STS token is the same thing as a presigned URL (not very familiar with S3 itself).
I’m just looking at a place where I can simply set the presigned URL into Uppy.
Would setting the presigned URL as the AwsS3 endpoint work?

const uppy = new Uppy()
	.use(Dashboard, { inline: true, target: 'body' })
	.use(AwsS3, {
		endpoint: {PRESIGNED_URL_HERE},
	});
6

@uppy/aws-s3 never uploads the whole file to the server. The plugin exists precisely to do direct client-to-s3 uploads. Unfortunately until we have @uppy/server-functions, you have to manually mimic the endpoints on your server for the presigned url request and/or multipart requests, as can be seen from that example shared.

7

When mimicking the endpoints, you can simply pass the endpoint option and nothing else. If you don’t want to do that, you can use all the options yourself and make network requests, such as in getUploadParameters