Reserve the NVIDIA GH200 Grace Hopper™ Superchip at Vultr today.
Author: Humphrey MpairweLast Updated: Sun, Nov 12, 2023
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.
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
This article uses the Cyberduck graphical tool available for macOS and Windows users. However, listed values apply to any S3 client tool.
Open Cyberduck from your applications menu
Click Open Connection from the main application bar
Click the FTP drop-down selector
Find and select Amazon S3 from the list of options
Enter your Vultr Object Storage hostname in the Server field
Keep the port set to 443
Enter your Vultr Object Storage access key in the Access Key ID: field
Enter your Vultr Object Storage secret key in the Secret Access Key: field
Click Connect to save your details and connect to your Vultr Object Storage instance
When connected, click the Action settings icon on the main menu bar and select New Folder from the list of options
Enter your desired name in lowercase to create a new bucket. For example
When created, double-click the bucket to access it
Right-click within the bucket and select Upload from the list of options
Select your desired file to upload to your Vultr Object Storage bucket
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.
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.
In your Cyberduck window, right-click your target uploaded file
From the list of options, find and click Info
In the open file pop-up window, click Metadata on the main navigation bar
Click the Settings Icon in the bottom left corner and select your desired metadata attribute to modify or add to your file
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.
In your file metadata attributes, select Content-Disposition from the list
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.
inlineinstructs 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.
Press ENTER to save your browser handling attribute
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(1).png. Specify a single name
image.png instead of the user matching the original filename as described below.
In your file metadata section, double-click the
Content-Disposition Value field to edit the contents
Modify your value to include the browser handling type, and the filename using the
; separator. For example,
inline; filename = "image.png"
Press ENTER to apply your download filename changes
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.
In your fileâs metadata section, add a new Content-Type attribute
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,
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
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.
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.
Access your file metadata attributes, and add a new
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
Press ENTER to save changes
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.
Access your file metadata section, and add a new Expires attribute
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
Press ENTER to apply changes
Access the file metadata attributes, and add a new Custom Header
In the Name field, enter
gzip in the Value field to set the file compression type to Gzip
Press ENTER to save your compression attribute
Access the file metadata attributes, and add a new Custom Header
Content-Length in the Name field
Add the correct filesize in bytes to the Value field. For example
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.
Depending on your intended audience, set up the file permissions to limit how users can interact and use your object as described below.
In your Cyberduck window, right-click your target file and select Info to edit its attributes.
Within the open dialog window, click Permissions on the main navigation bar
Click the Settings icon and select Everyone from the list
When added, click the Permission dropdown cursor to set your desired access level
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
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.
Navigate to your file Metadata attributes
Add a new Custom Header
Access-Control-Allow-Origin in the Name field
Double-click to edit the Value field, and enter your authorized address or domain name
Press ENTER to save the metadata attribute changes
Within your Cyberduck interface, right-click your target upload file and select Info from the list of options
Navigate to the General tab
Find the Web URL field, and right-click to copy the shareable link
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.
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.