Uploads

You can easily upload files to websites using Playwright, Puppeteer, or Selenium. The approach varies depending on your framework:

Playwright

Direct Upload

For Playwright, you can upload files directly from your local path. After creating and connecting to a session, follow these steps:

1. Make sure your file is available where you’re running your Playwright code
2. Use the setInputFiles method to upload the file
3. The file path should be relative to your current working directory

• Node.js
• Python

Playwright

import { chromium } from "playwright-core";
import { Browserbase } from "@browserbasehq/sdk";

(async () => {
  const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });
  const session = await bb.sessions.create({
    projectId: process.env.BROWSERBASE_PROJECT_ID!,
  });

  const browser = await chromium.connectOverCDP(session.connectUrl);
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto("https://browser-tests-alpha.vercel.app/api/upload-test");

  const fileInput = page.locator("#fileUpload");
  // logo.png is available relative to the current working directory
  await fileInput.setInputFiles("logo.png");
})().catch((error) => console.error(error));

Large Files Upload

For larger files, you can use the Session Uploads API. Follow this example:

• Node.js
• Python

Playwright

// ⭐️⭐️⭐️ IMPORTANT: Set your file name below
const fileName = "YOUR_FILE_NAME.EXAMPLE";
// ⭐️⭐️⭐️

import { chromium } from "playwright-core";
import { Browserbase } from "@browserbasehq/sdk";
import * as fs from "fs";

const apiKey = process.env.BROWSERBASE_API_KEY!;
const projectId = process.env.BROWSERBASE_PROJECT_ID!;

async function upload() {
  // 1. Initialize Browserbase Client
  console.log("✨ Initializing Browserbase client");
  const bb = new Browserbase({ apiKey });

  // 2. Create Browser Session
  console.log("🚀 Creating new browser session");
  const session = await bb.sessions.create({ projectId });

  // 3. Upload file via the Uploads API
  console.log("⬆️ Uploading file");
  try {
    const fileStream = fs.createReadStream(fileName);
    const result = await bb.sessions.uploads.create(session.id, {
      file: fileStream,
    });
    console.log(`✅ Upload successful: ${JSON.stringify(result)}`);
  } catch (error) {
    console.error(`❌ Upload failed... exiting: ${error}`);
    return;
  }

  // 4. Connect to the Session
  console.log("🔗 Connecting to browser session");
  const browser = await chromium.connectOverCDP(session.connectUrl);
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  // 5. Get Live View link for remote debugging
  const liveViews = await bb.sessions.debug(session.id);
  console.log("🔍 Live View link:", liveViews.debuggerUrl);

  // 6. Use the Browser
  console.log("🌐 Navigating to page: upload-test");
  await page.goto("https://browser-tests-alpha.vercel.app/api/upload-test", {
    waitUntil: "domcontentloaded",
  });

  // Set up CDP client for additional controls
  const cdpSession = await defaultContext.newCDPSession(page);
  const root = await cdpSession.send("DOM.getDocument");

  // Then find our input element
  const inputNode = await cdpSession.send("DOM.querySelector", {
    nodeId: root.root.nodeId,
    selector: "#fileUpload",
  });

  // Use DOM.setFileInputFiles CDP command
  const remoteFilePath = `/tmp/.uploads/${fileName}`;
  await cdpSession.send("DOM.setFileInputFiles", {
    files: [remoteFilePath],
    nodeId: inputNode.nodeId,
  });

  console.log("⌛ Waiting for 60 seconds: allow time for 1) file upload and 2) to see the file upload...");
  await new Promise((resolve) => setTimeout(resolve, 60000));

  // 7. Cleanup
  console.log("👋 Closing browser session");
  await page.close();
  await browser.close();

  // 8. Session Recording Link
  console.log("\n" + "─".repeat(60));
  console.log(`
🎥  Your session dashboard is ready
  https://www.browserbase.com/sessions/${session.id}`);
}

// Execute the main function
upload().catch((error) => console.error(error));

Session Uploads API

Learn more about the available params and response fields