Create an Asset (Designer API v2) — Webflow API Documentation

`webflow.createAsset(fileBlob)`

Create an asset on a site. Uploaded assets must adhere to specific size limitations:

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

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'

Syntax

1 webflow.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

Remote Source

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

Direct Upload

HTML

1 <!-- Add a file picker to your interface -->
2 <input type="file" id="fileInput" />

1 // Reference the file input element
2 const fileInput = document.getElementById('fileInput');
3 
4 // Add change event listener
5 fileInput.addEventListener('change', async function () {
6   try {
7     // Check if the file input element is indeed an input element
8     if (fileInput instanceof HTMLInputElement) {
9       // Get the selected file from the file input
10       const file = fileInput.files[0];
11       
12       // Check if a file is selected
13       if (!file) {
14         return; // Exit the function if no file is selected
15       }
16       
17       // Upload the selected file and create an asset
18       const asset = await webflow.createAsset(file);
19     } else {
20       console.error('Not an input element'); // Log an error if the file input is not an input element
21     }
22   } catch (err) {
23     console.error('Something went wrong', err); // Log any errors that occur during the process
24   }
25 });

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

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'

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

1	<!-- Add a file picker to your interface -->
2	<input type="file" id="fileInput" />

1	// Reference the file input element
2	const fileInput = document.getElementById('fileInput');
3
4	// Add change event listener
5	fileInput.addEventListener('change', async function () {
6	try {
7	// Check if the file input element is indeed an input element
8	if (fileInput instanceof HTMLInputElement) {
9	// Get the selected file from the file input
10	const file = fileInput.files[0];
11
12	// Check if a file is selected
13	if (!file) {
14	return; // Exit the function if no file is selected
15	}
16
17	// Upload the selected file and create an asset
18	const asset = await webflow.createAsset(file);
19	} else {
20	console.error('Not an input element'); // Log an error if the file input is not an input element
21	}
22	} catch (err) {
23	console.error('Something went wrong', err); // Log any errors that occur during the process
24	}
25	});