Assets

The Asset APIs enable you to manage and interact with your site’s media files through the Designer’s Assets panel. These APIs allow you to:

• Upload new assets to your Webflow site
• Retrieve existing assets and their metadata
• Update asset properties like names and alt text
• Organize assets into folders
• Get direct URLs to hosted assets

Using assets on a site

To display an asset on a page, you can:

1. Create or select an asset
2. Create an image element using the webflow.elementPresets.Image element preset
3. Set the asset on the image element
4. Optionally set additional properties like alt text for accessibility

Example

1
// Get a file from a remote URL
2
const response = await fetch("https://fastly.picsum.photos/id/336/200/300.jpg?hmac=FYvgN5rqQdtTh1q0wSE75sgfBRdhD-qNJwP12mTVXTc")
3
const blob = await response.blob()
4
const file = new File([blob], "bikelocks.jpg", { type: 'image/jpeg' });
5
6
// Create an asset from the file and set alt text
7
const asset = await webflow.createAsset(file)
8
await asset.setAltText('Candid photo of Marvin the Paranoid Android')
9
10
// Get Selected Element
11
const selectedElement = await webflow.getSelectedElement()
12
if (selectedElement) {           
13
  
14
  // Insert Image after selected Element
15
  const newImage = await selectedElement.after(webflow.elementPresets.Image)
16
17
  // Set the asset on the image element
18
  await newImage.setAsset(asset)
19
}

Supported file types

The Asset APIs support various file types including images, documents, and Lottie animations. Refer to the accepted MIME types listed below for compatibility. Lottie files should be passed as application/json 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'

Properties