Asset API Tutorial | Webflow API

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      const response = await axios.get(assetUrl, { responseType: "stream" });
      // Create a SHA-256 hash instance to generate the file hash
      const hash = crypto.createHash("sha256");
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the upload
(async () => {
  const siteId = process.env.SITE_ID; // Replace with your actual site ID
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Set up your development environment

1. Create a new Node.js project

First, set up the basic Node.js environment for your project. Start by creating a new directory and initializing a Node.js project:

$ mkdir webflow-asset-uploader 

$ cd webflow-asset-uploader 

$ npm init -y

This will create a new directory called webflow-asset-uploader and set up a package.json file, which will manage the project's dependencies and configurations.

2. Create a new `.env` file

Next, create a .env file to securely store environment variables like your API token. These values are crucial for authenticating requests to the Webflow API.

Open the .env file in your editor and add the following variables:

assets.js

.env

WEBFLOW_API_TOKEN=YOUR_WEBFLOW_API_TOKEN
SITE_ID=YOUR_SITE_ID

Replace YOUR_WEBFLOW_API_TOKEN and YOUR_SITE_ID with your Webflow credentials.

3. Install necessary packages

To build this asset upload script, you'll need several Node.js packages. Use npm to install these dependencies.

$ npm install dotenv webflow-api axios form-data crypto

dotenv: Loads environment variables from your .env file.
webflow-api: The official Webflow API client for interacting with Webflow resources.
axios: A promise-based HTTP client for making requests to external APIs.
form-data: Helps you create form data for uploading files.
crypto: A built-in Node.js module for generating hashes, which will help verify file integrity during uploads.

Once installed, these packages will enable you to interact with the Webflow API and upload assets to your projects.

4. Create `assets.js`

Next, create a JavaScript file named assets.js—this is where we’ll build out the code to handle asset uploads to Webflow.

$ touch assets.js

5. Import packages

Open the assets.js file in your editor and import the packages you installed.

These imports will give you access to the tools you need for interacting with the Webflow API, making HTTP requests, and working with form data.

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");

6. Initialize the Webflow client

Initialize the Webflow client using the API token from your .env file.

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});

The Webflow client will allow you to interact with Webflow's resources, such as creating asset folders and uploading assets.

7. Define asset folders and files

For this example, we'll define a set of folders and assets to upload. In practice, you might be pulling these from another location or database, but for this guide, we'll use a hardcoded list.

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];

Create asset folders

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

Now that we have defined our folders and assets, the next step is to create asset folders on the Webflow site.

1. Create function `createAssetFolder()`

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

This function, createAssetFolder(), takes the site ID and folder name as arguments.

2. Check for existing asset folders

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

Webflow only allows unique names for asset folders, so the first step is to check if a folder with the specified name already exists. We do this using the List Asset Folders endpoint. If a folder with the given name is found, the function returns the folder's ID.

3. Create new asset folder if one doesn't exist

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

If a folder does not already exist, create one using the Create Asset Folder endpoint. Once successfully created, the function returns the ID of the newly created folder.

4. Create main function

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

To execute the createAssetFolder() function, create an anonymous asynchronous function that iterates through the list of folders we defined earlier and calls createAssetFolder() for each one. This ensures that all required folders are created.

Generate a file hash

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

When uploading a file, Webflow requires you to include a cryptographic hash generated from the contents of that file.

This hash helps ensure data integrity and security, providing a unique "fingerprint" of the file that guarantees it hasn't been altered or tampered with during the upload process.

Before uploading an asset, we'll need to generate its hash using the SHA-256 algorithm.

1. Create `getFileHashFromUrl` function

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

To generate the file hash, create a function named getFileHashFromUrl(). This function will:

Use axios to retrieve the file from the provided URL with a GET request.
Use crypto to calculate the hash with a stream-based approach, which efficiently handles larger files.

2. Create the Promise

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

Wrap the function logic in a new Promise to handle the asynchronous hashing. Use resolve to return the hash value once calculated, and reject to handle any errors that occur.

3. Fetch the file as a stream

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

Use axios to download the file as a stream from the provided URL. Streaming is particularly helpful for large files since it avoids loading the entire file into memory.

4. Hash the file

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        // TO ADD: Upload logic
      }
    }
  }
})();

Create a SHA-256 hash instance to compute the hash of the file. Update the hash with each data chunk as it is streamed. Once the entire file has been streamed, resolve the promise with the final hash value.

Upload a new asset

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Now that we have set up the necessary folders, defined the files, and implemented the file hashing logic, it's time to upload these assets to Webflow. This process consists of two main steps:

Update Metadata to Webflow: Send metadata to Webflow to initiate the upload. Webflow will respond with the necessary details to proceed with uploading the file to Amazon S3.
Upload the File to S3: Use the provided URL and Amazon headers to upload the actual file to Amazon S3.

1. Create `uploadAsset()` function

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Define an asynchronous function called uploadAsset() that takes the following arguments: siteId, folderId, and assetUrl.

2. Get file hash and file name

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Use the getFileHashFromUrl() function to generate the file hash. Extract the file name from the URL.

3. Upload Metadata to Webflow

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Use the webflow.assets.create() method to send the siteId, parentFolder, fileName, and fileHash to Webflow.

The response from Webflow includes:

uploadUrl: The Amazon S3 URL to upload the file.
uploadDetails: Amazon-specific headers and parameters required for the file upload.

4. Prepare form data for Amazon S3 upload

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Use the FormData library to create a form object needed for the Amazon S3 upload

Refer to the Amazon S3 Upload Documentation for more details on each parameter.

Append Amazon S3 Headers

Append the required Amazon S3 headers from uploadDetails to the form. These headers are provided by Webflow and are necessary for the upload authorization.

Append File Data

Fetch the file using axios with a responseType of stream to handle large files efficiently. Append the file to the form data.

5. Upload to Amazon S3

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Use axios to make a POST request to the provided uploadUrl. The URL, along with the specific headers from uploadDetails, allows the file to be uploaded directly to AWS S3.

Call the main function

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
// Initialize Webflow client
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      // Fetch the file as a stream
      const response = await axios.get(assetUrl, { responseType: "stream" });
      
      // Initialize SHA-256 hash
      const hash = crypto.createHash("sha256");
      
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the folder creation and asset upload
(async () => {
  const siteId = process.env.SITE_ID;
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Now that we have defined all the necessary functions (createAssetFolder, getFileHashFromUrl, and uploadAsset), it's time to call the main function and complete the process of uploading assets to Webflow.

1. Update the main function

In assets.js, make sure the main function is properly set up to create the asset folders and upload the files. Update it to include the uploadAsset() function call for each asset URL.

This will:

Iterate through each folder in assetDetails.
Create the folder in Webflow if it doesn't already exist.
Upload each asset to the corresponding folder using the uploadAsset() function.

2. Run the script

To execute the script and upload the assets, run assets.js using Node.js in the terminal:

$ node assets.js

3. Verify successful upload

If everything is configured correctly, you should see output in the terminal that indicates the successful creation of folders and uploads of assets.

Additionally, you can refresh the Designer and open the Assets Panel in the Webflow designer to see your newly created assets.

If there are any errors (e.g., issues with the API token, invalid URLs, or upload failures), they will be logged in the console, providing useful feedback to troubleshoot.

Set up your development environment

1. Create a new Node.js project

First, set up the basic Node.js environment for your project. Start by creating a new directory and initializing a Node.js project:

$ mkdir webflow-asset-uploader 

$ cd webflow-asset-uploader 

$ npm init -y

This will create a new directory called webflow-asset-uploader and set up a package.json file, which will manage the project's dependencies and configurations.

2. Create a new `.env` file

Next, create a .env file to securely store environment variables like your API token. These values are crucial for authenticating requests to the Webflow API.

Open the .env file in your editor and add the following variables:

Replace YOUR_WEBFLOW_API_TOKEN and YOUR_SITE_ID with your Webflow credentials.

3. Install necessary packages

To build this asset upload script, you'll need several Node.js packages. Use npm to install these dependencies.

$ npm install dotenv webflow-api axios form-data crypto

dotenv: Loads environment variables from your .env file.
webflow-api: The official Webflow API client for interacting with Webflow resources.
axios: A promise-based HTTP client for making requests to external APIs.
form-data: Helps you create form data for uploading files.
crypto: A built-in Node.js module for generating hashes, which will help verify file integrity during uploads.

Once installed, these packages will enable you to interact with the Webflow API and upload assets to your projects.

4. Create `assets.js`

Next, create a JavaScript file named assets.js—this is where we’ll build out the code to handle asset uploads to Webflow.

$ touch assets.js

5. Import packages

Open the assets.js file in your editor and import the packages you installed.

These imports will give you access to the tools you need for interacting with the Webflow API, making HTTP requests, and working with form data.

6. Initialize the Webflow client

Initialize the Webflow client using the API token from your .env file.

The Webflow client will allow you to interact with Webflow's resources, such as creating asset folders and uploading assets.

7. Define asset folders and files

For this example, we'll define a set of folders and assets to upload. In practice, you might be pulling these from another location or database, but for this guide, we'll use a hardcoded list.

Create asset folders

Now that we have defined our folders and assets, the next step is to create asset folders on the Webflow site.

1. Create function `createAssetFolder()`

This function, createAssetFolder(), takes the site ID and folder name as arguments.

2. Check for existing asset folders

3. Create new asset folder if one doesn't exist

If a folder does not already exist, create one using the Create Asset Folder endpoint. Once successfully created, the function returns the ID of the newly created folder.

4. Create main function

Generate a file hash

When uploading a file, Webflow requires you to include a cryptographic hash generated from the contents of that file.

This hash helps ensure data integrity and security, providing a unique "fingerprint" of the file that guarantees it hasn't been altered or tampered with during the upload process.

Before uploading an asset, we'll need to generate its hash using the SHA-256 algorithm.

1. Create `getFileHashFromUrl` function

To generate the file hash, create a function named getFileHashFromUrl(). This function will:

Use axios to retrieve the file from the provided URL with a GET request.
Use crypto to calculate the hash with a stream-based approach, which efficiently handles larger files.

2. Create the Promise

Wrap the function logic in a new Promise to handle the asynchronous hashing. Use resolve to return the hash value once calculated, and reject to handle any errors that occur.

3. Fetch the file as a stream

Use axios to download the file as a stream from the provided URL. Streaming is particularly helpful for large files since it avoids loading the entire file into memory.

4. Hash the file

Upload a new asset

Now that we have set up the necessary folders, defined the files, and implemented the file hashing logic, it's time to upload these assets to Webflow. This process consists of two main steps:

Update Metadata to Webflow: Send metadata to Webflow to initiate the upload. Webflow will respond with the necessary details to proceed with uploading the file to Amazon S3.
Upload the File to S3: Use the provided URL and Amazon headers to upload the actual file to Amazon S3.

1. Create `uploadAsset()` function

Define an asynchronous function called uploadAsset() that takes the following arguments: siteId, folderId, and assetUrl.

2. Get file hash and file name

Use the getFileHashFromUrl() function to generate the file hash. Extract the file name from the URL.

3. Upload Metadata to Webflow

Use the webflow.assets.create() method to send the siteId, parentFolder, fileName, and fileHash to Webflow.

The response from Webflow includes:

uploadUrl: The Amazon S3 URL to upload the file.
uploadDetails: Amazon-specific headers and parameters required for the file upload.

4. Prepare form data for Amazon S3 upload

Use the FormData library to create a form object needed for the Amazon S3 upload

Refer to the Amazon S3 Upload Documentation for more details on each parameter.

Append Amazon S3 Headers

Append the required Amazon S3 headers from uploadDetails to the form. These headers are provided by Webflow and are necessary for the upload authorization.

Append File Data

Fetch the file using axios with a responseType of stream to handle large files efficiently. Append the file to the form data.

5. Upload to Amazon S3

Use axios to make a POST request to the provided uploadUrl. The URL, along with the specific headers from uploadDetails, allows the file to be uploaded directly to AWS S3.

Call the main function

1. Update the main function

In assets.js, make sure the main function is properly set up to create the asset folders and upload the files. Update it to include the uploadAsset() function call for each asset URL.

This will:

Iterate through each folder in assetDetails.
Create the folder in Webflow if it doesn't already exist.
Upload each asset to the corresponding folder using the uploadAsset() function.

2. Run the script

To execute the script and upload the assets, run assets.js using Node.js in the terminal:

$ node assets.js

3. Verify successful upload

If everything is configured correctly, you should see output in the terminal that indicates the successful creation of folders and uploads of assets.

Additionally, you can refresh the Designer and open the Assets Panel in the Webflow designer to see your newly created assets.

If there are any errors (e.g., issues with the API token, invalid URLs, or upload failures), they will be logged in the console, providing useful feedback to troubleshoot.

assets.js

.env

require("dotenv").config();
const { WebflowClient } = require("webflow-api");
const crypto = require("crypto");
const axios = require("axios");
const FormData = require("form-data");
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_TOKEN,
});
// Organize folders and assets
const assetDetails = [
  {
    folderName: "Universal Assets",
    assets: ["https://images.unsplash.com/photo-1451187580459-43490279c0fa"],
  },
  {
    folderName: "English Assets",
    assets: [
      "https://images.unsplash.com/photo-1543109740-4bdb38fda756",
      "https://images.unsplash.com/photo-1665410620550-c54105af7d0c",
      "https://images.unsplash.com/photo-1526129318478-62ed807ebdf9",
    ],
  },
  {
    folderName: "French Assets",
    assets: [
      "https://images.unsplash.com/photo-1454386608169-1c3b4edc1df8",
      "https://images.unsplash.com/photo-1500039436846-25ae2f11882e",
      "https://images.unsplash.com/photo-1528717663417-3742fee05a29",
    ],
  },
];
// Function to hash file data from URL
async function getFileHashFromUrl(assetUrl) {
  
  // Create a promise to handle asynchronous hashing of the file data
  return new Promise(async (resolve, reject) => {
    try {
      const response = await axios.get(assetUrl, { responseType: "stream" });
      // Create a SHA-256 hash instance to generate the file hash
      const hash = crypto.createHash("sha256");
      // Update the hash with each chunk of data received from the stream
      response.data.on("data", (data) => hash.update(data));
      // Finalize the hash calculation and resolve the promise with the hash value
      response.data.on("end", () => resolve(hash.digest("hex")));
      response.data.on("error", reject);
    } catch (error) {
      reject(error);
    }
  });
}
// Function to create an asset folder
async function createAssetFolder(siteId, folderName) {
  try {
    // Check if the folder already exists
    const existingFolders = await webflow.assets.listFolders(siteId);
    const existingFolder = existingFolders.assetFolders.find(
      (folder) => folder.displayName === folderName
    );
    if (existingFolder) {
      console.log(
        `Folder '${folderName}' already exists with ID: ${existingFolder.id}`
      );
      return existingFolder.id;
    }
    // Create the folder if it does not exist
    console.log(`Creating folder: ${folderName}`);
    const response = await webflow.assets.createFolder(siteId, {
      displayName: folderName,
    });
    console.log(`Folder '${folderName}' created with ID: ${response.id}`);
    return response.id; // Return folder ID for further use
  } catch (error) {
    console.error(
      `Error creating or retrieving asset folder '${folderName}':`,
      error
    );
  }
}
// Function to upload an asset to Webflow via S3
async function uploadAsset(siteId, folderId, assetUrl) {
  try {
    // Generate the file hash for validation
    const fileHash = await getFileHashFromUrl(assetUrl);
    const fileName = assetUrl.split("/").pop();
    // Step 1: Initialize the upload
    const uploadInit = await webflow.assets.create(siteId, {
      parentFolder: folderId,
      fileName: fileName + `.jpeg`,
      fileHash: fileHash,
    });
    const { uploadUrl, uploadDetails } = uploadInit;
    // Create form data for S3 upload
    const form = new FormData();
    // Append all required fields to the form
    form.append("acl", uploadDetails.acl);
    form.append("bucket", uploadDetails.bucket);
    form.append("X-Amz-Algorithm", uploadDetails.xAmzAlgorithm);
    form.append("X-Amz-Credential", uploadDetails.xAmzCredential);
    form.append("X-Amz-Date", uploadDetails.xAmzDate);
    form.append("key", uploadDetails.key);
    form.append("Policy", uploadDetails.policy);
    form.append("X-Amz-Signature", uploadDetails.xAmzSignature);
    form.append("success_action_status", uploadDetails.successActionStatus);
    form.append("Content-Type", uploadDetails.contentType);
    form.append("Cache-Control", uploadDetails.cacheControl);
    // Append the file to be uploaded
    const response = await axios.get(assetUrl, { responseType: "stream" });
    form.append("file", response.data, {
      filename: fileName,
      contentType: uploadDetails.contentType,
    });
    console.log(response);
    // Step 2: Upload to the provided S3 URL
    const uploadResponse = await axios.post(uploadUrl, form, {
      headers: {
        ...form.getHeaders(),
      },
    });
    if (uploadResponse.status === 201) {
      console.log(`Successfully uploaded ${fileName} to Webflow.`);
    } else {
      console.error(
        `Failed to upload ${fileName}. Response status: ${uploadResponse.status}`
      );
    }
  } catch (error) {
    console.error(`Error uploading asset from ${assetUrl}:`, error);
  }
}
// Main function to execute the upload
(async () => {
  const siteId = process.env.SITE_ID; // Replace with your actual site ID
  for (const { folderName, assets } of assetDetails) {
    const folderId = await createAssetFolder(siteId, folderName);
    if (folderId) {
      for (const assetUrl of assets) {
        await uploadAsset(siteId, folderId, assetUrl);
      }
    }
  }
})();

Set up your development environment

1. Create a new Node.js project

2. Create a new .env file

3. Install necessary packages

4. Create assets.js

5. Import packages

6. Initialize the Webflow client

7. Define asset folders and files

Create asset folders

1. Create function createAssetFolder()

2. Check for existing asset folders

3. Create new asset folder if one doesn't exist

4. Create main function

Generate a file hash

1. Create getFileHashFromUrl function

2. Create the Promise

3. Fetch the file as a stream

4. Hash the file

Upload a new asset

1. Create uploadAsset() function

2. Get file hash and file name

3. Upload Metadata to Webflow

4. Prepare form data for Amazon S3 upload

Append Amazon S3 Headers

Append File Data

5. Upload to Amazon S3

Call the main function

1. Update the main function

2. Run the script

3. Verify successful upload

Set up your development environment

1. Create a new Node.js project

2. Create a new .env file

3. Install necessary packages

4. Create assets.js

5. Import packages

6. Initialize the Webflow client

7. Define asset folders and files

Create asset folders

1. Create function createAssetFolder()

2. Check for existing asset folders

3. Create new asset folder if one doesn't exist

4. Create main function

Generate a file hash

1. Create getFileHashFromUrl function

2. Create the Promise

3. Fetch the file as a stream

4. Hash the file

Upload a new asset

1. Create uploadAsset() function

2. Get file hash and file name

3. Upload Metadata to Webflow

4. Prepare form data for Amazon S3 upload

Append Amazon S3 Headers

Append File Data

5. Upload to Amazon S3

Call the main function

1. Update the main function

2. Run the script

3. Verify successful upload

2. Create a new `.env` file

4. Create `assets.js`

1. Create function `createAssetFolder()`

1. Create `getFileHashFromUrl` function

1. Create `uploadAsset()` function

2. Create a new `.env` file

4. Create `assets.js`

1. Create function `createAssetFolder()`

1. Create `getFileHashFromUrl` function

1. Create `uploadAsset()` function