> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Files



## Article: Resumable Upload API

## Article Link: https://dev.wix.com/docs/velo/apis/wix-media-v2/files/resumable-upload-api.md

## Article Content:

---
title: Resumable Upload API
---

# Resumable Upload API
This article demonstrates how to use the response object from [`generateFileResumableUploadUrl()`](wix-media-v2/files/generate-file-resumable-upload-url) to upload a file to a site's Media Manager. 

>**Note:** Due to limits on the size and duration of files that you can upload, we recommend using [`importFile()`](wix-media-v2/files/import-file). See [Wix Media: Supported Media File Types and File Sizes](https://support.wix.com/en/article/wix-media-supported-media-file-types-and-file-sizes) for more details.

## Authorization
This endpoint uses the `uploadToken` from the response for authorization.
No additional authorization is needed.
                      
## Syntax

```html
PUT {{generateFileResumableUploadUrlResponse.uploadUrl}}/{{generateFileResumableUploadUrlResponse.uploadToken}}
```

## Query Params
| Name      | Type    | Optional   | Description                                                                                                                             |
|-----------|---------|:----------:|-----------------------------------------------------------------------------------------------------------------------------------------|
| filename  | string  |     no     | File name that appears in the Media Manager. Include the file's extension in the name to prevent potential errors. |

## Example
### Implement a Resumable Upload Client using TUS Protocol
In this example we use [tus-js-client](https://github.com/tus/tus-js-client/) to implement a resumable upload using the TUS protocol. 

### Request
```typescript
async function resumableFileUpload(resumableUploadUrlResponse: GenerateFileResumableUploadUrlResponse, mimeType: string): Upload {
  // Get the file content to upload.
  const fileName = 'imageExample.jpg';
  const fileContent = await fs.createReadStream(path.join(__dirname, '..', 'files', fileName));

  const params = {
    filename: fileName,
    contentType: mimeType,
    token: resumableUploadUrlResponse.uploadToken
  };

  // Wrap the resumable upload session in a promise to wait for the upload to finish.
  await new Promise(async (resolve, reject) => {
    // Create a new TUS upload.
    const upload = new tus.Upload(fileContent, {
      // Use the uploadUrl from the response of the generate URL endpoint.
      endpoint: resumableUploadUrlResponse.uploadUrl,
      // Enable tus-js-client to automatically retry on errors.
      retryDelays: [0, 3000, 5000, 10000, 20000],
      // TSend parameters to the upload server to indentify the file and authentication token.
      metadata: {
        filename: fileName,
        contentType: mimeType,
        token: resumableUploadUrlResponse.uploadToken
      },
      // Callback for errors that can't be fixed using retries.
      onError: function (error) {
        console.log('Failed because: ' + error);
        reject(error);
      },
      // Callback for reporting upload progress.
      onProgress: function (bytesUploaded, bytesTotal) {
        var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
        console.log(bytesUploaded, bytesTotal, percentage + '%');
      },
      // Callback for once the upload is completed.
      onSuccess: function () {
        console.log('Download %s from %s', fileName, upload.url);
        resolve(true);
      }
    });

    upload.start();
  });

  // PUT request to finalize the upload.
  // Note that we concatenate the URL and token of the resumable upload response.
  const result = await axios.put(
    `${resumableUploadUrlResponse.uploadUrl}/${resumableUploadUrlResponse.uploadToken}`,
    {}, { params: { filename: fileName } }
  );
}
```

>**Notes:** 
> - Receiving a successful response does not indicate that the upload is complete. To run code when the upload finishes, use the [`onFileDescriptorFileReady()`](/wix-media-v2/events/on-file-descriptor-file-ready) and [`onFileDescriptorFileFailed()`](/wix-media-v2/events/on-file-descriptor-file-failed) events. Learn more about [knowing when a file is ready](/wix-media-v2/files/importing-files#knowing-when-the-file-is-ready).
> - You can't call this API using [wix-fetch](https://dev.wix.com/docs/velo/api-reference/wix-fetch/fetch.md) because the body isn't a string. Instead, use an [external package](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages.md) to call the API, such as [`axios`](https://github.com/axios/axios).


### Response
```json
{
  "file": {
    "id": "2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "displayName": "file.jpg",
    "url": "https://static.wixstatic.com/media/2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "parentFolderId": "media-root",
    "hash": "cf96f0567ed967f02bc9580ab8db86be",
    "sizeInBytes": "15359",
    "private": false,
    "mediaType": "IMAGE",
    "media": {
      "image": {
        "image": "wix:image://v1/0abec0_b291a9349a0b4da59067f76287e386fb~mv2.jpg/leon.jpg#originWidth=3024&originHeight=4032",
        "faces": []
      }
    },
    "operationStatus": "READY",
    "thumbnailUrl": "https://static.wixstatic.com/media/2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "labels": [],
    "createdDate": "2022-09-11T15:13:24.000Z",
    "updatedDate": "2022-09-11T15:13:24.000Z"
  }
}
```


## Status/Error Codes
Errors from this endpoint will include an HTTP status code.
        
### Use uploaded media on your site
After making the REST HTTP request, you can either display the media on your site directly from the [Media Manager](https://support.wix.com/en/article/wix-media-about-the-media-manager#accessing-the-media-manager-1), or you can set the uploaded media to `$w` elements.

To display the media files on the frontend of your site with code, you first need to retrieve the file's Media Manager URL.

To retrieve the Media Manager URL:
1.  Call [`getFileDescriptor()`](https://www.wix.com/velo/reference/wix-media-v2/files/getfiledescriptor), passing in `file.id` from the Upload API's [response object](#Response) as its only parameter. 
2. Retrieve the valid Media Manager URL from the `media` property in the `FileDescriptor` object that was returned in the previous step.
3. To use the media in a `$w` element, set the value of the associated `media` property to the element's `src` property.