I'm trying to upload a file via Google Puppeteer on a page with multiple (three) Dropzone instances.
The first instance accepts video files, while the other two accept image types.
To upload a file to the video Dropzone I'm using this code which is working fine:
const fileSelector = '.dz-hidden-input[type=file][accept*=mp4]';
const element = await page.waitForSelector(fileSelector);
await element.uploadFile('/path/to/file.mp4');
Now I try to identify the other two image instance file inputs. To get the file input DOM handles I can use this:
const dropzone1 = await page.$eval('#image-dropzone-1', dz => dz.dropzone.hiddenFileInput);`
As this is returning a DOM handle dropzone1.uploadFile() is not available. Seems I need to have a elementHandle to use this function.
I'd like to avoid using a selector like this:
await page.waitForSelector('.dz-hidden-input[type=file][accept*=jpg]:nth-of-type(2)')`as it's not very stable.
Does anyone know how I can identify the fields accordingly? As the hidden file inputs don't have any unique attributes.
