uploadFile uploads empty file

[TomasKavaliauskas]

• Puppeteer version: 1.20.0
• Platform / OS version: Ubuntu 18.04
• URLs (if applicable): https://www.point2homes.com/Account/AddAListing (registered only)
• Node.js version: v13.0.1

What steps will reproduce the problem?

In that page there is a form in a popup with photo upload:

When you click Add files it opens file dialog, and then when you select a file it shows this preview:

But when Im using pupeteer to upload file, I get this:

It shows correct filename and correct file size, but preview is empty image and when I try to "Start Upload", it shows that Im trying to upload an empty file.

My code looks like this:

const NAVIGATION_OPTIONS = {
    timeout: 90000,
    waitUntil: 'networkidle2'
};

execute().then(async function (responseParam) {

   console.log("X");

}).catch(async function (err) {

    console.log(err);

});

const puppeteer = require("puppeteer");

const BROWSER_PARAMS = {
    headless: false,
    ignoreHTTPSErrors: true,
    dumpio: false,
    userDataDir: './myUserDataDir',
    args: [
        '--single-process',
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-infobars'
    ]
};

async function execute() {

    return new Promise(async (resolve, reject) => {

            let browser = await puppeteer.launch(BROWSER_PARAMS);
            let page = await browser.newPage();

            await page.setViewport({
                width: 1920,
                height: 1080
            });

            await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36');

await Promise.all([
            page.goto('https://www.point2homes.com/Account/AddAListing'),
            page.waitForNavigation(NAVIGATION_OPTIONS)
        ]);

        await page.click('#AddPhotoBtn');
        await page.waitFor(1000);
        await page.waitForSelector('.btn-add-photo input[name="files[]"]');
        await page.waitFor(1000);
        let photoField = await page.$('.btn-add-photo input[name="files[]"]');
        await photoField.uploadFile('/home/Projects/point2homes/0.jpg');
        await page.evaluate(() => $('.btn-add-photo input[type="file"]').trigger('change'));

        await page.waitFor(10000000);

    });

}

I tried multiple files, different extensions, tried with absolute/relative path, same result. I also noticed strange thing, I used to upload photos in mercari.com (also uses dropzone) and it used to respond to input file changes by just using uploadFile, but here, without this line:

await page.evaluate(() => $('.btn-add-photo input[type="file"]').trigger('change'));

It does not seem to work at all. VIew just stays like this, like no file was selected at all:

[TomasKavaliauskas]

Something is not right with uploadFile in the newest puppeteer version. I actually just thought that I am using version 1.20.0 , but it was the newest version, when I reverted to v 1.20.0 same code works fine without even calling trigger('change') on the file input field. Due to lack of time to finish this project, I cannot test in which version this functionality breaks, but I will try it out when I will have more time.

[GreedyY0]

I have the same problem of an empty file being uploaded to a website. I also get a response from the page saying "TypeError: t.map is not a function". I have already tried the latest version and version 1.20.0. Always the same message.

[GreedyY0]

I have found a working solution for me. Puppeteer version 2.0.0 Try it: FileChooser

[olizh]

@GreedyY0 I can confirm that 2.0.0 is the only version if you want to use uploadFile. In 2.1.1, uploadFile is broken again.

[m1m1s1ku]

Should be fixed by : #5358

[paullewis]

This should be fixed by 532ae57 as we've moved back to DOM.setFileInputFiles

[DaYesahh]

I have the same problem. And I fix it by the way that some function is monitoring the uploadfile button. It means when I try to click upload file using puppeteer, but my function is not be triggered.