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:

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:

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:

For your convenience, I've also added the code for the turtle page to a block on the website:

Thus, we can embed various media that we uploaded to S3 into our HTML pages, just like we did with the turtle image. We simply insert the image link into the img tag, and we get the result.

Great job!