File Uploading

This guide will show you how to set up file uploading in your SaaS app using AWS S3 with presigned URLS for secure file storage.

Using AWS S3

How presigned URLs work

Presigned URLs are URLs that have been signed with your AWS credentials and can be used to upload files to your S3 bucket. They are time-limited and can be generated on the server and sent to the client to upload files directly to S3.

The process of generating a presigned URL is as follows:

The client sends a request to the server to upload a file The server generates a presigned URL using its AWS credentials The server sends the presigned URL to the client The client uses the presigned URL to upload the file directly to S3 before the URL expires We use this method to upload files to S3 because it is more secure than uploading files directly from the client to S3. It also allows us to keep our AWS credentials private and not expose them to the client.

To use presigned URLs, we’ll need to set up an S3 bucket and get our AWS credentials.

Setting up an S3 bucket

As BoilerPro comes with built-in support S3 buckets defined in the CDK stack, you don't need to do anything for the setup.

Using and Customizing File Uploads with S3 in your App

With your S3 bucket set up and your AWS credentials in place, you can now start uploading files in your app using presigned URLs by navigating to localhost:3000/file-upload and uploading a file.

To begin customizing file uploads, is important to know where everything lives in your app. Here’s a quick overview:

export type File = {
	PK: string; // PK = #FILE
	SK: string; // SK = #FILE#S3KEY e.g. #FILE#8dc3c293-f356-44a4-b632-9c8b3c283f06.jpeg
	name: string;
	type: string;
	key: string;
	uploadUrl: string;
	userCognitoId: string;
	createdAt: string;
};

The createFile action lives here and calls the getUploadFileSignedURLFromS3 within it using your AWS credentials before passing it to the client. This function stores the files in the S3 bucket within folders named after the user’s ID, so that each user’s files are stored separately.

resources/lambda/api-gateway/s3/get-all-files-by-user.ts:

This function fetches all File information uploaded by the user.

resources/lambda/api-gateway/s3/get-download-signed-url.ts:

This function fetches the presigned URL for a file to be downloaded from S3 using the file’s key stored in the app’s database.

resources/lambda/api-gateway/s3/get-upload-signed-url.ts:

This function generates a presigned URL for a file to be uploaded to S3.