> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Create an Asset

> Create a new asset on your Webflow site.

## `webflow.createAsset(fileBlob)`

Create a new asset on your Webflow site.

This method is specifically for creating new assets - if you need to update an existing asset, use the [set asset file](/designer/reference/set-asset-file) method instead. Be sure to review the [limits](#limits) and [MIME types](#mime-types) sections to ensure your files meet the requirements.

#### Adding assets to pages

To add an asset to a page:

1. Create an asset
2. Create an [image element](/designer/reference/image-element)
3. Use the [`element.setAsset(asset)`](/designer/reference/image-element/setAsset) method to set the asset

### Syntax

```typescript
webflow.createAsset(fileBlob:File): Promise<Asset>
```

### Parameters

* **`fileBlob`**:`File` -  Represents a valid [File](https://developer.mozilla.org/en-US/docs/Web/API/File) to upload. Refer to the examples below for guidance on uploading an asset from a remote source and directly from a file picker.

### Returns

**Promise\<*Asset*>**

A Promise that resolves to the new Asset.

### Example

#### Remote File

```typescript
// Fetch image from remote source and build a Blob object
    const response = await fetch(url)
    const blob = await response.blob()
    const file = new File([blob], fileName, {
      type: 'image/png',
    })

    // Create and upload the asset to webflow
    const asset = await webflow.createAsset(file);
    console.log(asset)
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

#### Direct Upload

**`HTML`**

```html HTML
<!-- Add a file picker to your interface -->
<input type="file" id="fileInput" />
```

```javascript
// Reference the file input element
const fileInput = document.getElementById('fileInput');

// Add change event listener
fileInput.addEventListener('change', async function () {
  try {
    // Check if the file input element is indeed an input element
    if (fileInput instanceof HTMLInputElement) {
      // Get the selected file from the file input
      const file = fileInput.files[0];

      // Check if a file is selected
      if (!file) {
        return; // Exit the function if no file is selected
      }

      // Upload the selected file and create an asset
      const asset = await webflow.createAsset(file);
    } else {
      console.error('Not an input element'); // Log an error if the file input is not an input element
    }
  } catch (err) {
    console.error('Something went wrong', err); // Log any errors that occur during the process
  }
});
```

### Errors

If the method fails to create an asset, the method will return an error with the following cause and message.

| Tag                    | Message                                   |
| :--------------------- | :---------------------------------------- |
| ResourceCreationFailed | Failed to create asset for \$\{File.name} |

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | any    | any    | any      | any      |

## Limits

Uploaded assets must adhere to specific size limitations:

* Images must not exceed 4MB
* Documents must not exceed 10MB

## MIME types

Refer to the accepted MIME types listed below for compatibility. Pass Lottie files as `application/json` MIME types.

**`MIME Types`**

```Text MIME Types
'image/jpeg'
'image/jpg'
'image/png'
'image/gif'
'image/svg+xml'
'image/bmp'
'image/webp'
'application/pdf'
'application/msword'
'application/vnd.ms-excel'
'application/vnd.ms-powerpoint'
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
'text/plain'
'text/csv'
'application/vnd.oasis.opendocument.text'
'application/vnd.oasis.opendocument.spreadsheet'
'application/vnd.oasis.opendocument.presentation'
'application/json'
```