How to serve images from an S3 bucket to an app?

I have built a React app in which user-uploaded images (avatars, profile wallpapers, etc) are stored in an S3 bucket. I wanted to understand what is the best possible way to serve those images back with the app.

Hi Annie!
There are two ways in which you can serve images from the S3 bucket.

  1. You can serve images directly from your S3 bucket with its URLs, here objects or images need to be public and it is not a very efficient way to serve images you will face a lot of delay and latency in serving those images.
  2. Setup a Cloudfront CDN distribution on your S3 bucket and serve images using the CDN, here it is not necessary for objects or images to be public and it’s a very efficient way to serve images, your images will load much faster with this approach.

I recently made a project in Typescript Language and now I want to implement the feature called “file upload” so the end user can upload the file in S3 bucket from the dashboard without exposing my AWS credentials. Can someone help me to figure this out?

Yes, you can do this using the S3 pre-signed url. Your backend would need to create these temporary urls before the front end could use them. The urls can be used to upload or download files. Anyone with these urls can download or upload files to your bucket, however hot-linking is restricted due to the transitory nature of the urls.

Is it possible to download a file from an Amazon S3 bucket without having an AWS username and password?

Definitely, there are three typical methods for gaining access to S3 files and objects without using AWS credentials:

• Allowing access to the bucket, a folder inside the bucket, or specific items. The setup and use of this method is arguably the simplest, but your objects are, well, public.
• Front using CloudFront your bucket. With all of your files accessible through CloudFront edge locations, this enables you to keep your bucket completely private and speeds up your website.
• Using the pre-signed urls as explained in the above.