Client Uploads | Tigris Object Storage Documentation

Uploading Client-Side Files to Tigris

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:

name: (Required) A string specifying the name of 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`.
concurrency	No	Maximum number of concurrent part uploads for multipart uploads. Default is `4`.
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})`.

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
name: Name of 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.