Handling dialog boxes to upload file to a website using Puppeteer

Question

I have a script that is almost completed except the last part. The last part needs me to choose a PDF file to upload.

I have tried:

inputUploadHandle = await page.$('input[type=file]');
await inputUploadHandle.uploadFile('/myfile.pdf');

And i get an error of:

(node:20704) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'uploadFile' of undefined

When i manually do this process by the end when i click here

and i choose my file:

And it shows that it got uploaded like this:

But when i have also tried using:

const[fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click('#filingDocumentSection > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > ul > li > div > div.col-sm-7 > button > i'),
])

await fileChooser.accept(['/myfile.pdf']);

Now here i DO see that something has happened but i don't think site actually accepted the pdf file. The console reads no error, the page looks like its waiting for me to do something else. What i did notice is when i do it this way, i can no longer click on the box where you would upload the file. Its like that button lost its functionality.

It looks like the button for the dialog box is opened, then closed immediately but i don't see that the file was actually accepted or uploaded.

I've used this to see if im using the correct query selector in the actual pages console:

document.querySelectorAll('input[type=file]')[0];

Which returns:

<input type="file" ngf-select="" ngf-drop="" ngf-drag-over-class=
"{accept: 'dragover', reject: 'dragover-err', delay: 50}" ngf-multiple="{{filingComponent.AllowMultipleFiles}}" 
ng-attr-accept="{{filingComponent.AllowedFileTypes}}" 
ngf-accept="filingComponent.AllowedFileTypes" 
ngf-change="UploadFiles(filingComponent, $files)" 
title="File system upload" accept="application/pdf" multiple="multiple">

Now on the back end in the console, i do see that functions were called when i uploaded the file manually:

And i looked at the function that does the .UpLoadFiles():

n.DownloadDocument = function (t, i, r, u) { 
    var f = !1; 
    u !== undefined & u !== null && u === 1 && (f = !0); 
    !f && n.SelectedItem.Filing.ViewStampedDocumentsUrl ? window.open(n.SelectedItem.Filing.ViewStampedDocumentsUrl) : $.get(t.format(i, r)).success(function (n) { window.location = n.DownloadUrl }) }; 
n.UploadFiles = function (t, i) { 
    var r, u; 
    n.FileToUploadLength = 0; 
    r = i.length; 
    console.group("$scope.UploadFiles()"); 
    angular.isArray(i) && i.length > 0 && (n.SelectedItem.Filing.Id === 0 ? (
        u = i.shift(), 
        n.UploadFileChain(u, t, r, i)) : _.each(i, function (i) { 
            n.UploadFileChain(i, t, r, []) })); 
            console.groupEnd() };

Don't know if that helps....

Is there something puppeteer uses aside .uploadfile or .accept to make a dialog box choose your file?

Answer 1

So according to this: https://github.com/puppeteer/puppeteer/issues/5503

You have to downgrade Puppeteer.

All i did was: npm i [email protected]

And voila... my code worked.

Answer is:

const[fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click('#filingDocumentSection > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > ul > li > div > div.col-sm-7 > button > i'),
])

await fileChooser.accept(['/myfile.pdf']);

But you have to use puppeteer 2.0.0

Answer 2

I have tried doing this a long time ago in other companies and i don't think what you're doing is wrong but i think maybe its the version of puppeteer you're using. I forgot which version works but definitely the const[fileChooser] = code here should work.