Create an Asset

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 method instead. Be sure to review the limits and MIME types sections to ensure your files meet the requirements.

To add an asset to a page:

  1. Create an asset
  2. Create an image element
  3. Use the element.setAsset(asset) method to set the asset

Syntax

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

Parameters

  • fileBlob:File - Represents a valid File to be uploaded. 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

1// Fetch image from remote source and build a Blob object
2const response = await fetch(url)
3const blob = await response.blob()
4const file = new File([blob], fileName, {
5  type: 'image/png',
6})
7
8// Create and upload the asset to webflow
9const asset = await webflow.createAsset(file);
10console.log(asset)

Errors

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

TagMessage
ResourceCreationFailedFailed to create asset for ${File.name}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canManageAssetsanyanyanyany

Limits

Uploaded assets must adhere to specific size limitations:

  • Images must not exceed 4MB
  • Documents are capped at 10MB

MIME Types

Refer to the accepted MIME types listed below for compatibility. Lottie files should be passed as application/json MIME types.

MIME Types
1'image/jpeg'
2'image/jpg'
3'image/png'
4'image/gif'
5'image/svg+xml'
6'image/bmp'
7'image/webp'
8'application/pdf'
9'application/msword'
10'application/vnd.ms-excel'
11'application/vnd.ms-powerpoint'
12'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
13'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
14'application/vnd.openxmlformats-officedocument.presentationml.presentation'
15'text/plain'
16'text/csv'
17'application/vnd.oasis.opendocument.text'
18'application/vnd.oasis.opendocument.spreadsheet'
19'application/vnd.oasis.opendocument.presentation'
20'application/json'
Built with