Client Uploads

Amongst all the other great features of Tigris, free egress fees is another example of what makes us stand out from other providers. We care about the bandwidth costs and we want to make it as cheap as possible for you to use Tigris. That's why we've made it so that you can upload files directly to Tigris from the client side.

We leverage the presigned URLs features to allow you to upload files directly to Tigris from the client side.

Client side uploads are a great way to upload objects to a bucket directly from the browser as it allows you to upload objects to a bucket without having to proxy the objects through your server saving costs on bandwidth.

Uploading an object

You can use the upload method from client package to upload objects directly to Tigris from the client side.

import { upload } from "@tigrisdata/storage/client";

upload accepts the following parameters:

• path: (Required) A string specifying the path to the object
• body: (Required) A blob object as File or Blob
• options: (Optional) A JSON object with the following optional parameters:

options

Parameter	Required	Values
url	Yes	The URL to backend endpoint where Storage SDK is running on server.
access	No	The access level for the object. Possible values are public and private.
addRandomSuffix	No	Whether to add a random suffix to the object name. Default is false.
contentType	No	The content type of the object.
contentDisposition	No	The content disposition of the object. Possible values are inline and attachment. Default is inline. Use attachment for downloadable files.
multipart	No	Pass multipart: true when uploading large objects. It will split the object into multiple parts and upload them in parallel.
partSize	No	The size of the part to upload. Default is 5 * 1024 * 1024 (5 MiB).
onUploadProgress	No	Callback to track upload progress: onUploadProgress({loaded: number, total: number, percentage: number}).
config	No	A configuration object to override the default configuration.

In case of successful upload, the data property will be set to the upload and contains the following properties:

• contentDisposition: content disposition of the object
• contentType: content type of the object
• modified: Last modified date of the object
• path: Path to the object
• size: Size of the object
• url: A presigned URL to the object

Example

<input type="file" onchange="handleFileChange(event)" />

<script>
  function handleFileChange(event) {
    const file = event.target.files[0];
    upload("file.txt", file, {
      url: "/api/upload",
      access: "private",
      multipart: true,
      onUploadProgress: ({ loaded, total, percentage }) => {
        console.log(`Uploaded ${loaded} of ${total} bytes (${percentage}%)`);
      },
    });
  }
</script>

You can see a full example here.