AWS S3 Media Usage
In the previous chapter, we created a bucket and configured it to our needs. Now, let's learn how to upload and use media files in our bucket.
First, we need to open the Objects tab and click the Upload button:
We will be presented with a menu where we can select files or a folder containing files for upload. Currently, for us, S3 operates similarly to Google Drive, for example.
Note
Google Drive is also a cloud storage service, but it provides a smaller set of tools for working with data. Therefore, for programming, AWS S3 is much more commonly used, and that's exactly what we're doing.
You need to select any image and upload it to the platform; in our case, it will be a picture of a turtle.
After uploading, we open the uploaded file, and the following information appears:
| Property | Description |
|---|---|
| Owner | Unique identifier of the AWS user who owns this S3 object. |
| AWS Region | The AWS region where the object is stored, specified as "Europe (Stockholm)" with the value eu-north-1. |
| Last modified | The date and time of the last modification of the object, shown here as April 3, 2024, 15:15:08 UTC+3. |
| Size | The size of the file, 35.3 KB, which is a fairly standard size for an image. |
| Type | The file format, indicating that the object is an image in PNG format. |
| Key | The name of the file in S3, in this case, turtle.png, which uniquely identifies the object in the S3 bucket. |
| S3 URI | Uniform Resource Identifier pointing to the location of the file in Amazon S3. |
| Amazon Resource Name (ARN) | Standard AWS resource identifier used to specify a specific resource in AWS. |
| Entity tag (Etag) | The file's checksum used to verify data integrity during transmission. |
| Object URL | Direct link to the object that can be used to access the file via a browser or HTTP request. |
By the way, here's what our turtle looks like this:
How to use this image in our projects?
To use this file, we have already configured the bucket correctly so that we can access it from any source.
Let's write a small HTML page with a space for this photo.
We can insert the photo using a link in the <img> tag in HTML.
The code for this photo will look like this:
index.html
index.css
index.js
As you can see, when the code is executed, the photo of this turtle is displayed for us.
All we did was write a link to the picture of our turtle in the HTML tag.
Note
Note that the photo of this turtle is not in the files of this website, and it may not be downloaded locally on your device. This file is stored on AWS S3, from where we access it and display it on any page.
You can also directly access this image by following this link.
Now, let's write a small HTML page where we describe the turtle and give the user the opportunity to feed it.
The code will look like this:
index.html
index.css
index.js
For your convenience, I've also added the code for the turtle page to a block on the website: