Upload Best Practices for Vultr Object Storage

Introduction

Vultr Object Storage is an S3-compatible storage service that allows you to upload, store, share, and modify files through a web-accessible interface. When uploading files to Vultr Object Storage, it’s safe to take into consideration best practices to ensure compatibility with modern browsers such as Chrome, Firefox, Edge, among others.

This article explains upload best practices for Vultr Object Storage you can apply to improve the storage and delivery of your files.

Prerequisites

Before you begin:

• Deploy a Vultr Object Storage instance

  Enable Versioning, and keep note of your Vultr Object Storage details to access the instance using an S3 client

• Install an S3 Client tool such as Cyberduck, s3cmd, or s3 browser on your computer

  This article uses the Cyberduck graphical tool available for macOS and Windows users. However, listed values apply to any S3 client tool.

Configure Cyberduck to use Vultr Object Storage

1. Open Cyberduck from your applications menu

2. Click Open Connection from the main application bar

3. Click the FTP drop-down selector

   

4. Find and select Amazon S3 from the list of options

5. Enter your Vultr Object Storage hostname in the Server field

6. Keep the port set to 443

7. Enter your Vultr Object Storage access key in the Access Key ID: field

8. Enter your Vultr Object Storage secret key in the Secret Access Key: field

   

9. Click Connect to save your details and connect to your Vultr Object Storage instance

10. When connected, click the Action settings icon on the main menu bar and select New Folder from the list of options

11. Enter your desired name in lowercase to create a new bucket. For example hello-world

12. When created, double-click the bucket to access it

13. Right-click within the bucket and select Upload from the list of options

    

14. Select your desired file to upload to your Vultr Object Storage bucket

15. View the upload progress, and verify that the file is added to your bucket when complete.

You have connected Cyberduck to your Vultr Object Storage instance, created a new bucket, and uploaded a sample file to apply changes for public access.

Declare Upload File Metadata

File metadata refers to attributes associated with the file such as the type, validity, and descriptions. Metadata allows modern browsers to interprete your file correctly. Common attributes include filename, format, ownership, and timestamps that define how a file can be accessed by your intended users.

To ensure that your files are delivered correctly, configure each upload file’s metadata. This allows you to enhance the file capabilities and allow access to users using modern web browsers as described in the steps below.

1. In your Cyberduck window, right-click your target uploaded file

2. From the list of options, find and click Info

   

3. In the open file pop-up window, click Metadata on the main navigation bar

4. Click the Settings Icon in the bottom left corner and select your desired metadata attribute to modify or add to your file

   

Enable Browser handling to display files before download

By default, when you share uploaded files from your Vultr Object Storage, a web browser auto-downloads the file. To display files before download, enable the Content-Disposition header to set how browsers should handle your file.

1. In your file metadata attributes, select Content-Disposition from the list

2. In the Value field, remove the attachment keyword, and enter inline to enable the file to display before downloading

   

   When set to attachment, the web browser downloads your file when fully loaded. inline instructs the browser to display the file, and allows the user to manually download it from your Vultr Object Storage. This is important when working with media files such as images to allow display instead of downloading the file.

3. Press ENTER to save your browser handling attribute

   

Set the Download Filename

You can specify a download filename that is different from your uploaded file to enable users to keep different versions as the same file. For example, if you have multiple variations of the same file such as image422.png, and image422(1).png. Specify a single name image.png instead of the user matching the original filename as described below.

1. In your file metadata section, double-click the Content-Disposition Value field to edit the contents

2. Modify your value to include the browser handling type, and the filename using the ; separator. For example, inline; filename = "image.png"

   

3. Press ENTER to apply your download filename changes

Set the Upload File Type

File type attributes allow a browser to correctly read and deliver your file in its correct file. Set the correct MIME (Multipurpose Internet Mail Extensions) type to specify a category for your uploaded files as described below.

1. In your file’s metadata section, add a new Content-Type attribute

2. Set the Value field to your desired file type depending on its contents. For example, apply image/png to represent a PNG image

   

   Below are common file types you can apply depending on your file type

   • image/jpeg: A JPEG image file

   • image/gif: A GIF image file

   • audio/mpeg: An audio file that uses MPEG. For example, .mp3

   • video/mp4: An mp4 MPEG4 video file.

   • application/mp4: Non-visual media coded in the MP4 format

   • application/vnd.android.package-archive: An Android application package file

3. When set, press ENTER to save your new file type attribute

Commonly, your file type is auto-detected and set when uploading the file to Vultr Object Storage. When changing the type, verify that the attribute does not exist, or delete the available value.

Enable File Caching

File caching is important when serving media files such as images from your Object Storage through your website. When set, caching allows the object to stay in your client’s browser cache before revalidating it from your Object Storage. Apply caching to improve your resource speed as described below.

1. Access your file metadata attributes, and add a new Cache-Control attribute

2. In the Value field, enter max-age= and include your desired caching period. For example, max-age=86400 sets the caching period to 24 hours. The public declaration enables caching for the resource for both client browsers and any private caching servers

   

3. Press ENTER to save changes

Set Up Expiry Headers

File expiry headers specify when the object becomes invalid in the client browser. This is important when caching to instruct browsers to fetch and cache the latest copy of your file. Set up file expiry headers on your uploaded files as described below.

1. Access your file metadata section, and add a new Expires attribute

2. In the Value field, enter your desired expiry time in the format, Day of the week, Day of the month: Month: Year: Hour: Minute: Second: Timezone. For example Mon, 31 Dec 2023 02:31:30 GMT

   

3. Press ENTER to apply changes

Enable File Compression

1. Access the file metadata attributes, and add a new Custom Header

2. In the Name field, enter Content-Encoding

3. Enter gzip in the Value field to set the file compression type to Gzip

   

4. Press ENTER to save your compression attribute

Specify the Uploaded File Size

1. Access the file metadata attributes, and add a new Custom Header

2. Enter Content-Length in the Name field

3. Add the correct filesize in bytes to the Value field. For example 4721920 represents 4.5 MBs

   

4. Press ENTER to apply changes to your file

By specifying the filesize, a web browser displays the total size to the user when downloading from your Vultr Object Storage.

Set Up File Permissions

Depending on your intended audience, set up the file permissions to limit how users can interact and use your object as described below.

1. In your Cyberduck window, right-click your target file and select Info to edit its attributes.

2. Within the open dialog window, click Permissions on the main navigation bar

3. Click the Settings icon and select Everyone from the list

   

4. When added, click the Permission dropdown cursor to set your desired access level

5. Select READ from the drop-down list to grant users with the unique Vultr Object Storage link read access to the file

   

Below are the available permission levels

• FULL_CONTROL: Grants any user with the public link read and write privileges to the file

• READ: Grants view access to all users with the public link

• WRITE: Grants write privileges to all users with the public link

Enable Cross-Origin Resource Sharing (CORS)

To secure access to your uploaded Vultr Object Storage files, enable CORS policies to specify the origin addresses that are allowed to access specific files as described below.

1. Navigate to your file Metadata attributes

2. Add a new Custom Header

   

3. Enter Access-Control-Allow-Origin in the Name field

4. Double-click to edit the Value field, and enter your authorized address or domain name

   

5. Press ENTER to save the metadata attribute changes

View the Upload file Public Link and Test Changes

1. Within your Cyberduck interface, right-click your target upload file and select Info from the list of options

2. Navigate to the General tab

3. Find the Web URL field, and right-click to copy the shareable link

   

4. Paste the file access link in your web browser, and verify that you can view the file before downloading. If you applied a CORS rule, access the file using a permitted source to display it before download

If you access your Vultr Object Storage Files using a domain or address that is not listed in your CORS attribute, you will receive a Content Encoding Error. Before accessing the file, verify that your address is permitted to access the Vultr Object Storage resource. This is important when embedding uploaded files in web applications to prevent hotlinking attempts.

Conclusion

By uploading files correctly on Vultr Object Storage, you can securely control your file attributes and improve the endpoint performance in modern web browsers. For more information, visit the Vultr Object Storage documentation.