Playwright: Upload files from non-input element that cannot be used page.setInputFiles?

Question

I'm working on uploading files through non-input HTML tag on Playwright.

For example, you can use setInputFiles like this, and this works:

await page.setInputFiles('input[type="file"]', './headphone.png')

But apparently setInputFiles only works for input element, something like this will be error:

await page.setInputFiles('label.ImageUpload__label ', './headphone.png');

The HTML I'm working on is like this:

<div id="ImageUpload" class="ImageUpload u-marginB10">
        <label class="ImageUpload__label js-dragdrop-area" for="selectFileMultiple">
            <span class="ImageUpload__hide">drag and drop or select files</span>
            <span class="ImageUpload__text"><span class="js-dragdrop-num">10</span>up to</span>
        </label>
</div>

So, is it possible to upload files to such HTML elements with Playwright?

Answer 1

NodeJs: https://playwright.dev/docs/api/class-filechooser

        page.on("filechooser", (fileChooser: FileChooser) => {
             fileChooser.setFiles(["/path/to/a/file"]);
        })

or using async await

import path = require('path')

...

const fileChooserPromise = page.waitForEvent('filechooser')
await page.getByRole('button', { name: 'drag and drop or select files' }).click()
const fileChooser = await fileChooserPromise
await fileChooser.setFiles([path.join(__dirname, 'example.jpg')])

Python: https://playwright.dev/python/docs/api/class-filechooser/

with page.expect_file_chooser() as fc_info:
    page.click("upload")
file_chooser = fc_info.value
file_chooser.set_files("/path/to/a/file")

Java: https://playwright.dev/java/docs/api/class-filechooser

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