How to save media files from Tilda to the cloud? Step-by-step instructions

If you have worked with Tilda, you probably wondered where to store images, videos, and other files. If you use CMS and Tilda servers, then in the tariff plans we encounter restrictions on the weight of data. In addition, storing large media files has a negative impact on resources – the site loads more slowly. How to avoid these problems? The optimal solution is to use S3, because

object storage

allows for improved performance and is easily scalable.

Hi! My name is Natasha, I am a manager at Selectel. Today I will tell you how to integrate a Tilda website with S3 storage to optimize file storage and delivery. Details under the cut!

Introduction to the project


My friends and I, who are also product managers, noticed that their startup was spending too much time on routine tasks. We decided to make a small no-code tool that would minimize manual labor.

We got a business card site (it's on the KDPV of this article) with connected no-code services. They simplified the calculation of task priorities, filling out business documentation and informing the technical team about new requests.

On the website, we collect a request form for the development of new functions by the technical team. In it, you can specify the context of the task, description, value for the project, deadlines for implementation, and screenshots or images. The latter are needed for greater context.

Application form.


Create S3 for storing images


We decided to place graphic files on Selectel accountwhere the startup project was located.

1. Let's create a container.

In the control panel

go to the tab

Object Storage →Create container

. We set any name, in our case – tildalinks-sm.

Type

we choose containers

Public

so that it can be accessed without authorization.

Class storageStandard. Standard storage is suitable for distributing static content and other data that requires quick access. For example, media content, materials from websites, documents, letters. This is our option.

In field Addressing left parameter Virtual Hosted enabled, but the addressing type is not important for the project. Click Create container.

Creating a container.

Created container in the control panel.

2. Let's set up access rights to the container so that Tilda can access the files.

Let's go to the tab Access control and create a new user by clicking on the button Add user.

Creating a user.

Type — Service user. In the field Role let's choose Account Administrator.

Selecting a role.

3. Get S3 keys for the created user. To do this, in the tab user management select the created one and in the field S3 keys let's press Add key.

Access control.

In the window Adding S3 Key select our project and click Generate.

S3 key addition window.

The received Access key and Secret key should be saved. They are available for viewing only once.

Received keys.

Integration of Tilda and S3


We connect S3 storage to the form on Tilda, where we want to collect screenshots of our stakeholders. It was decided that images, graphic schemes and screenshots will become part of the functionality request, so we added the ability to upload a file to the BF204N form (receiving data from the form).

Form Tilda BF204N.

Next, we will set up a field for working with files.

  1. In the input field with the file type for connecting the S3 storage, you should correctly fill in the TILDA UPLOAD WIDGET KEY. There is a hint in the settings – follow the link Get the key. Further detailed instructions on connecting the object storage will be available. From the list of services, select Selectel.

Field of type file.

Selecting a storage service.

  1. According to the instructions, add data for access to S3. Enter the saved Access and Secret keys, as well as the container type and its name. For a public container, you should copy the public domain in its settings, and for a private one, the project ID.

  1. After saving the settings, TILDA UPLOAD WIDGET KEY will appear. Its value must be copied and the field with the file type added to the BF204N form on the site.

Please note: if you save access settings, Tilda autotests should work correctly.

Successful test on the S3 service settings page in Tilda.

3. Test and publish. After connecting S3, it is important to test the site and make sure that all files are loaded correctly. You can check them on the provider side if a public container is used.

Link to file in S3.

You can check the links within the Tilda website after filling out the application form. This applies to any container, including private ones. There is an action log on the main page of the project, where the sending of files to the provider's storage is recorded.

Tilda application log.

Details of the completed application in the log in Tilda.

We checked all the links between the site and the provider, made sure that the links were working and that the automation was correct. After successful testing, you can publish the site and enjoy its work. Later, we used the files from the form in the delivery of technical tasks for developers and in the project documentation.

Conclusion


Remember: in addition to transferring media files to the provider's side, you need to optimize them. The file size should be minimal without losing quality. If the form is filled in by many users at the same time, the data loading speed will play an important role. This will also help to significantly save space in the container under heavy load.

If the project is planning to use images on a mass scale, it makes sense to consider a CDN. For our startup, this is not very relevant.

Integrating your Tilda site with object storage is an effective way to improve your site's performance, scalability, and security. Follow these instructions to easily connect S3 storage and enjoy its benefits!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *