Uploads

// ⭐️⭐️⭐️ 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));

# ⭐️⭐️⭐️ IMPORTANT: Set your file name below
file_name = "YOUR_FILE_NAME.EXAMPLE"
# ⭐️⭐️⭐️

import os
from browserbase import Browserbase
from playwright.sync_api import sync_playwright
import time

api_key = os.environ.get("BROWSERBASE_API_KEY")
project_id = os.environ.get("BROWSERBASE_PROJECT_ID")

def upload(playwright):
  # 1. Initialize Browserbase Client
  # ───────────────────────────────
  print("✨ Initializing Browserbase client")
  bb = Browserbase(api_key=api_key)

  # 2. Create Browser Session
  # ───────────────────────────
  print("🚀 Creating new browser session")
  session = bb.sessions.create(project_id=project_id)

  # 3. Upload file via the Uploads API: https://docs.browserbase.com/reference/api/create-session-uploads
  # ───────────────────────
  print("⬆️ Uploading file")
  try:
    with open(file_name, 'rb') as file:
      result = bb.sessions.uploads.create(
        id=session.id,
        file=file
    )
      print(f"✅ Upload successful: {result}")
  except Exception as e:
    print(f"❌ Upload failed... exiting: {str(e)}")
    return

  # 4. Connect to the Session
  # ───────────────────────
  print("🔗 Connecting to browser session")
  browser = playwright.chromium.connect_over_cdp(session.connect_url)
  default_context = browser.contexts[0]
  page = default_context.pages[0]

  # 5. Get Live View link for remote debugging
  # ───────────────────────────────
  live_views = bb.sessions.debug(session.id)
  print("🔍 Live View link:", live_views.debugger_url)

  # 6. Use the Browser
  # ─────────────────────────
  print("🌐 Navigating to page: upload-test")
  page.goto("https://browser-tests-alpha.vercel.app/api/upload-test", wait_until="domcontentloaded")

  # Set up CDP client for additional controls
  cdp_session = default_context.new_cdp_session(page)

  root = cdp_session.send('DOM.getDocument')

  # Then find our input element
  input_node = cdp_session.send('DOM.querySelector', {
    'nodeId': root['root']['nodeId'],
    'selector': '#fileUpload'
  })

  # Use DOM.setFileInputFiles CDP command with the found nodeId and set the remote file path
  remote_file_path = f"/tmp/.uploads/{file_name}";
  cdp_session.send('DOM.setFileInputFiles', {
    'files': [remote_file_path],
    'nodeId': input_node['nodeId']
  })

  print("⌛ Waiting for 60 seconds: allow time for 1) file upload and 2) to see the file upload...")
  time.sleep(60)

  # 7. Cleanup
  # ───────────────────────
  print("👋 Closing browser session")
  page.close()
  browser.close()

  # 8. Session Recording Link
  # ────────────────────────────
  print("\n" + "─" * 60)
  print(f"""
🎥  Your session dashboard is ready
  https://www.browserbase.com/sessions/{session.id}""")

# Execute the main function
if __name__ == "__main__":
    with sync_playwright() as playwright:
        upload(playwright)