Files upload for non-input elements - FileChooser playwright

In this case there is a non-input file upload element (meaning there is no input element with the type “file”), we have to use the filechooser method. Using the fileChooser.setFiles method we are setting the values of the file input the chooser is associated with. And, then after a successful upload we are asserting all the file names on the success page.

Syntax :

  //upload file when no input
  // Start waiting for file chooser before clicking. Note no await.
  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.getByText('Choose files').first().click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles(['upload/playwright.png', 'upload/selenium.png']); 

  

OR

FileChooser fileChooser = page.waitForFileChooser(() -> page.getByText("Upload file").click());
fileChooser.setFiles(Paths.get("myfile.pdf"));

Example 

// @ts-check
import { test, expect } from '@playwright/test';

test('Upload using file chooser', async ({page}) => {

  await page.goto('https://blazorise.com/docs/components/file-picker');
  await page.waitForTimeout(3000);  

  //upload file when no input
  // Start waiting for file chooser before clicking. Note no await.
  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.getByText('Choose files').first().click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles(['upload/playwright.png', 'upload/selenium.png']); 

  await page.locator('//button[contains(text(),"Upload")]').click();
  await page.waitForTimeout(1000);
  const uploadStatus = await page.getByText('Uploaded successfully').isVisible();
  expect(uploadStatus).toBeTruthy();  
 
});

Final output :