# 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](/docs/sdks/tigris/using-sdk/.md#presigning-an-object) 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[​](#uploading-an-object "Direct link to 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`[​](#options "Direct link to 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[​](#example "Direct link to 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](/docs/sdks/tigris/examples/.md#client-uploads).