Playwright Upload File Without Input Element

Our last article discussed uploading a file when the input element type is file. In several cases, you will find that the input element is hidden or not directly linked with an element that triggers the file chooser. In that case, the file chooser will display when you perform any action on non-input elements. To handle this, you can call methods of FileChooser Interface.

Table of Contents

1. File Chooser Interface Methods
2. Syntax of the setFiles() method
3. Demo Website
4. Upload Single File
5. Upload Multiple Files
6. Create File and Upload File Runtime
7. Upload using DOM Manipulation
8. Video Tutorial

File Chooser Interface Methods

You can use four methods linked with File Chooser Interface:

1. fileChooser.element(): Returns input element associated with this file chooser. returns: <ElementHandle>
2. fileChooser.isMultiple(): Returns True if the file chooser accepts multiple files. returns: <boolean>
3. fileChooser.page(): Returns page this file chooser belongs to. returns: <Page>
4. fileChooser.setFiles(files[, options]): Sets the value of the file input this chooser is associated with. Here relative paths are to the current working directory.

Syntax of the setFiles() method

fileChooser.setFiles(files[, options])

• files <string|Array<string>|Object|Array<Object>>: Use String array for multiple files or {name, mimeType, buffer)
  • name <string>: File name
  • mimeType <string>: File type
  • buffer <Buffer>: File content
• options? <Object>
  • noWaitAfter? <boolean>
  • timeout? <number>
• returns: <Promise<void>>#

Demo Website

For the practice visit, this link, when you click on the [Select Files] link, file chooser will display, and once you click on the [Upload Files] link, files will be uploaded.

Upload Single File

test.only('Non-Input File Upload', async ({page})=> 
{
    await page.goto("http://autopract.com/selenium/upload2/")
    
    const [fileChooser] = await Promise.all([   
        page.waitForEvent('filechooser'),
        
        // Click on Select Files button
        page.locator('a#pickfiles').click(),  
      ])

      await fileChooser.setFiles('tests/G.png')
   
      // Click on Upload Files Link
      await page.locator("a#uploadfiles").click()
});

• fileChooser: Using the fileChooser reference variable, you can access the method of FileChooser Interface.
• Promise.all(): prevents a race condition between clicking and waiting for the file chooser.
• [fileChooser]: Here, we assign the first element returned by Promise.all() to the filechooser variable. Here we have used the destructuring assignment to unpack the value of an array and assign them to a new variable. You can use it without square brackets here and later refer using fileChooser[0].
• waitForEvent('filechooser'): The waitForEvent() method must be called before clicking on the button which launches the file chooser. Before performing the click action setting up, waiting is required.

Upload Multiple Files

await fileChooser.setFiles(['tests/G.png','tests/image.jpg'])

Create and Upload File Runtime

You can also create files dynamically and upload them.

await fileChooser.setFiles({
    name: 'file.txt',
    mimeType: 'text/plain',
    buffer: Buffer.from('this is test')        
})

Upload using DOM Manipulation

Set the class name to null so that class which is hiding input is removed.

await page.evaulate(()={
	const inputSelector = document.querySelector('#uploadFile')
	inputSelector.className = ''
})