webflow.createAsset(fileBlob)
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.
'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'
Syntax
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
// 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)
Direct Upload
<!-- Add a file picker to your interface -->
<input type="file" id="fileInput" />
// 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 |