How can I make sure to wait for a file to finish uploading before using puppeteer to submit?

Question

I need to use puppeteer to upload files, then press a submit button once the files have finished uploading. Right now it presses submit right away, which is too soon.

I assumed puppeteer handle.uploadFile('file_path.ext') would wait for the upload to complete before resolving, but it looks like it doesn't.

Edit: To clarify, as per @ggorlen's comment, we are using the https://github.com/kartik-v/bootstrap-fileinput package to handle the behavior of our input field.

user_14144258 · Answer

I've been trying to find what events or responses to listen for to know that a file has finished uploading, but didn't find anything useful. The below is the best I've come up with and it's working for me so far in my situation:

// Get the input
let selector = `input[type=file]`;
let file_input_handle = await page.waitForSelector( selector );

// This comes before the upload starts
// Notice `await` is missing. Don't wait for this to finish now.
// This will be working in the background so we can use it later.
let disabled_selector = `${ selector }[disabled]`;
let wait_for_disabled = page.waitForSelector( disabled_selector );

// Upload
await handle.uploadFile(...paths);

// Stop to wait for the input to be disabled. If it already happened by now
// then this will be done already and it won't wait.
await wait_for_disabled;

// Now DO use `await` to wait for the input to be enabled again.
// On the webpage I'm working with, that means the files are done uploading.
let enabled_selector = `${ selector }:not([disabled])`;
await page.waitForSelector( enabled_selector );

// Do the next thing, like submitting the form
console.log( `Done uploading!` );

Edit:

As I said, this is specific to my case. We're using the https://github.com/kartik-v/bootstrap-fileinput library that disables the input while the upload is happening.

Also, as per @ggorlen's suggestion, I've made an example. I'll put the code here, but you can see it at https://jsfiddle.net/tgfp4x6h/3/. I wasn't sure puppeteer would work in jsfiddle and I wasn't sure how to store files on there to load, so I decided to just use my own promises as examples.

That means you have to upload files by hand to see it at work. You'll be able to see the background change colors from red through to green as the process happens. Open the browser console to see logs of the action happening. Make sure to upload a bunch of images or something so that it takes long enough for you to see the changes happen.

// Bootstrap input from https://github.com/kartik-v/bootstrap-fileinput

let waitForDisabled = function (resolve, reject) {

    console.log('waiting for disabled');
    let disabled_node = document.querySelector('input#input_id[disabled]');
  
  if ( disabled_node ) {
    // If node is found, finish
    resolve()
    console.log( disabled_node );
    
  } else {
    // otherwise, loop
    setTimeout(function() {
        waitForDisabled( resolve, reject );
    }, 100);
  }
}

let waitForEnabled = function (resolve, reject) {

    console.log('waiting for enabled');
    let enabled_node = document.querySelector('input#input_id:not([disabled])');
  
  if ( enabled_node ) {
    // If node is found, finish
    resolve()
    console.log( enabled_node );
    
  } else {
    // otherwise, loop
    setTimeout(function() {
        waitForEnabled( resolve, reject );
    }, 100);
  }
}

let uploadFile = function ( resolve, reject ) {
    // This would be uploading the file, but you should do it by hand
  resolve();
};


let wait_for_it = async function () {
  
  let waiting_for_disabled = new Promise( waitForDisabled );
  
  await new Promise( uploadFile );
  
  await waiting_for_disabled;
  await new Promise( waitForEnabled );
  console.log( 'Done uploading!' );
}

wait_for_it();

How can I make sure to wait for a file to finish uploading before using puppeteer to submit?

1 Answers