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));