Trouble uploading with playwright

Question

I am trying to upload a file with playwright using the following line

await page.locator('div').filter({ hasText: /^Change$/ }).first().setInputFiles('tests/pictures/download (1).jpg');

If i use the following line in headed mode, The Upload button is pressed and the next part is having to choose a file from my local machine so i know the part up to the location filter works correctly but i cannot figure out the rest of it

await page.locator('div').filter({ hasText: /^Change$/ }).first().click();

But what i really want to do is use a file in one of my project folders, as I have written the path for it in the first line but the error i am getting is

Error: locator.setInputFiles: Error: Node is not an HTMLInputElement

How can i use the first line of code to upload my picture successfully ?

As an alternative i tried to use this, which always times out

const fileWithPath = path.join('../tests/pictures', 'download (1).jpg');
    const [fileChooser] = await Promise.all([
        page.waitForEvent('filechooser'),
        page.locator('div').filter({ hasText: /^Change$/ }).first().click(),
    ]);
    await fileChooser.setFiles([fileWithPath]);