JS file upload with PhantomJS/CasperJS

Question

I'm trying to automate uploading images in CasperJS.

The form on the site appears to be using plupload. Once a button is clicked, a file browser dialog appears where multiple images can be selected.

How can I handle this file upload form with CasperJS? Is it possible to upload multiple images all at once?

Answer 1

Even custom file upload widgets use an <input type="file" ...> element underneath their UI. That is necessary in order to get access to files on the client machine.

You can bypass the widget UI by directly setting the file that needs to be uploaded. Since CasperJS is built on top of PhantomJS, you can use all PhantomJS functions including page.uploadFile(selector, filename). In your case that would look something like this:

casper.page.uploadFile("#uploaders input[type='file']", myfilename);

Note that it is also possible to use all casper.fill*() functions provided you know the file input element name beforehand and the file input field is inside of a form element.