I'm trying to use CasperJS to upload images to a web-form. My form looks something like this: ``` ... Campaign Banner Now Large Now Medium Now Small <input id="…

Issues getting CasperJS to upload image to file field - tried CasperJS fill() and PhantomJS uploadFile()

casperjs, html, javascript, phantomjs

Solution

Since you are filling and submitting successfully, try a Wait command on the click.

casper.then(function() {
    //+++ form fill here

    //waits 1 sec
    this.wait(1000, function() {
        this.click(x('//*[@id="content-wrapper"]//button/span'));
    });
});

Problem

I'm trying to use CasperJS to upload images to a web-form. My form looks something like this: ``` <form action="" method="POST" enctype="multipart/form-data" class="form-vertical"> ... <legend>Campaign Banner</legend> <div class="control-group image-field "> <label class="control-label">Now Large</label> <div class="controls"> <div class="file-field"><input id="id_now_large_image" name="now_large_image" type="file"></div> <div class="image-preview"></div> <div class="clear"></div> <span class="help-inline"></span> </div> </div> <div class="control-group image-field "> <label class="control-label">Now Medium</label> <div class="controls"> <div class="file-field"><input id="id_now_medium_image" name="now_medium_image" type="file"></div> <div class="image-preview"></div> <div class="clear"></div> <span class="help-inline"></span> </div> </div> <div class="control-group image-field "> <label class="control-label">Now Small</label> <div class="controls"> <div class="file-field"><input id="id_thumbnail_image" name="thumbnail_image" type="file"></div> <div class="image-preview now-small"></div> <div class="clear"></div> <span class="help-inline"></span> </div> </div> ``` The submit button looks like this: ``` <div class="form-actions"> <button type="submit" class="btn btn-small ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save changes</span></button> </div> ``` I've put a Gist of the full HTML here: https://gist.github.com/victorhooi/8277035 First, I've tried using CasperJS's fill method: ``` this.fill('form.form-vertical', { 'now_large_image': '/Users/victor/Dropbox/CMT Test Resources/Test Banners/Default Banners/now_large.jpg', }, false); this.click(x('//*[@id="content-wrapper"]//button/span')); ``` I also did a this.capture(), and I saw that the file field had been filled in: I'm not using the fill method's inbuilt submit, but I'm clicking on the submit button myself: this.click(x('//*[@id="content-wrapper"]//button/span')); I then do another capture, and I can see that the form has been submitted: However, the image doesn't seem to have been uploaded at all. I've also tried using PhantomJS's uploadFile() method: ``` this.page.uploadFile('input[name=now_large_image]', '/Users/victor/Dropbox/CMT Test Resources/Test Banners/Default Banners/now_large.jpg'); ``` and then clicking on the submit button as well. Same issue - the form field gets filled in - however, the image itself doesn't seem to get submitted. Any ideas on how I can get the images to upload correctly here?

Original source