Upload Files to Input Element
browser_file_uploadUpload files to web page file input elements using selectors for automated testing and form submission.
Instructions
Upload files to file input elements on the page
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | ||
| paths | Yes |
Implementation Reference
- src/server.ts:492-555 (handler)The core handler function that parses input, validates the file input element and file paths, then uses Playwright's page.locator().setInputFiles() to upload the files.
async (params: any) => { try { const input = z.object({ selector: z.string(), paths: z.array(z.string()).min(1) }).parse(params); await this.playwright.ensureConnected(); const page = this.playwright.getPage(); // Validate that the element exists and is a file input const element = page.locator(input.selector); const elementType = await element.getAttribute('type'); if (elementType !== 'file') { throw new Error('Target element is not a file input (type="file")'); } // Validate that files exist (for absolute paths) const fs = await import('fs'); const path = await import('path'); const validatedPaths = []; for (const filePath of input.paths) { try { // Convert relative paths to absolute paths const absolutePath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath); // Check if file exists if (!fs.existsSync(absolutePath)) { throw new Error(`File not found: ${filePath}`); } // Check if it's actually a file (not directory) const stats = fs.statSync(absolutePath); if (!stats.isFile()) { throw new Error(`Path is not a file: ${filePath}`); } validatedPaths.push(absolutePath); } catch (fileError) { throw new Error(`File validation failed for ${filePath}: ${fileError instanceof Error ? fileError.message : String(fileError)}`); } } // Upload the files await element.setInputFiles(validatedPaths); return { content: [{ type: 'text', text: `Successfully uploaded ${validatedPaths.length} file(s) to element: ${input.selector}` }] }; } catch (error) { return { content: [{ type: 'text', text: `File upload failed: ${error instanceof Error ? error.message : String(error)}` }], isError: true }; } } - src/server.ts:481-491 (registration)Registers the 'browser_file_upload' tool with the MCP server, providing title, description, and inline input schema. The handler function follows immediately.
// Browser file upload tool this.server.registerTool( 'browser_file_upload', { title: 'Upload Files to Input Element', description: 'Upload files to file input elements on the page', inputSchema: { selector: z.string(), paths: z.array(z.string()).min(1) } }, - src/types.ts:49-52 (schema)Zod schema defining the input structure for the browser_file_upload tool: selector (string) and paths (array of strings, min 1).
export const BrowserFileUploadInputSchema = z.object({ selector: z.string(), paths: z.array(z.string()).min(1) }); - src/types.ts:67-67 (schema)TypeScript type inferred from the BrowserFileUploadInputSchema for type safety.
export type BrowserFileUploadInput = z.infer<typeof BrowserFileUploadInputSchema>;