DEV Community

Practical Puppeteer: How to upload a file programatically

Sony AK on December 19, 2019

Hi everybody! Today I will share about how to upload file using Puppeteer. If you don't know about Puppeteer yet, here is the brief explanation. ...

Read full post

Ashiqur Rahman • Feb 17 '20 • Edited

can you please write an article about, how to, make a puppeteer extra plugin?

I want to make a plugin so that, whenever any interactions (click on a button, navigate to a page, etc..) it will take a screenshot automatically before and after the interaction. so that I don't have to call page.screenshot manually every time!

Sony AK • Apr 21 '20

Hi Ashiqur, wow nice use case, I still don't have any experience for writing plugin for Puppetter but I will note it for this nice use case.

Rudra • Apr 6 '20

hey, i am starting a new project with puppeteer. Do you want to work ?

Brian Bolton • Feb 4 '21

FYI: this call should have an await

    // Sets the value of the file input to fileToUpload
    inputUploadHandle.uploadFile(fileToUpload);

Just spent an hour debugging an automatic upload form due to this :P

Christopher Sandvik • Jan 31 '20

This is great, except I'm stuck at one part. What would you do if there is no upload button, and the upload is normally automatically trigerred when the file is uploaded? For some reason nothing happens when I call the uploadFile function, I would expect it to continue automatically.

Sony AK • Feb 1 '20

Hi Chris,
Thanks, but sorry I am still don't understand your use case, do you have any sample of code or target web to do that? What do you mean by "no upload button". Basically we just target the <input type="file"> and call the uploadFile method for the file input selector. Tell me more and maybe I can help you.

Oliver Zhang • Mar 12 '20 • Edited

Hi Sony, first of all, thanks for a very useful post. This works perfect on my Mac. But when I deploy the code on Heroku, the file doesn't really upload. It looks like Pupeteer on Heroku couldn't find the file in the following line, thus the submit resulting in no file upload:

inputUploadHandle.uploadFile(fileToUpload);

The file exists in that path on Heroku's server because I'm able to send that file as an email attachment using Node Mailer. I'v been scratching my head for two days in a row. I wonder if you happen to have tried this on a Heroku app.