> 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: Upload API

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

## Article Content:

---
title: Upload API
---

# Upload API
This article demonstrates how to use the `uploadUrl` response from [`generateFileUploadUrl()`](wix-media-v2/files/generate-file-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 upload token included in the url for authorization.
No additional authorization is needed.
                                   

## Syntax
```html
PUT {{generateFileUploadUrlResponse.uploadUrl}}
```

[//]: # (## Path Params)

[//]: # (| Name     | Type   | Optional | Description                                                                                                                             |)

[//]: # (|----------|--------|:--------:|-----------------------------------------------------------------------------------------------------------------------------------------|)

[//]: # (| filename | string |    no    | File name that appears in the Media Manager. Include the file's extension in its name to prevent potential errors. |)


## Headers Params
| Name         | Type   | Optional | Description                                                                     |
|--------------|--------|:--------:|---------------------------------------------------------------------------------|
| Content-Type | string |    no    | File content type. For example, "image/jpeg" for a jpg file. |


## 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. |


>**Note:** In case of failure due to incorrect `mimeType`, include the file's extension in the `filename` parameter and set the `Content-Type` to 'application/octet-stream'. Doing this allows Wix servers to detect the correct content type of the file.

## Request
```typescript
async function uploadMyFile(uploadUrl, fileContent, mimeType) {
  const params = {'filename':'my-audio-track.mp3'};
  const headers = {
    'Content-Type': mimeType
  }      

  const uploadResponse = await axios.put( uploadUrl, fileContent, { headers, params } );
  const file = await getFileDescriptor(uploadResponse.file.id);
  return file;
}
```

>**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.