title: Issues getting CasperJS to upload image to file field - tried CasperJS fill() and PhantomJS uploadFile()
body: <p>I'm trying to use CasperJS to upload images to a web-form.</p>
  
  <p>My form looks something like this:</p>
  
  <pre><code>&lt;form action="" method="POST" enctype="multipart/form-data" class="form-vertical"&gt;
      ...                        
          &lt;legend&gt;Campaign Banner&lt;/legend&gt;
          &lt;div class="control-group image-field "&gt;
              &lt;label class="control-label"&gt;Now Large&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="file-field"&gt;&lt;input id="id_now_large_image" name="now_large_image" type="file"&gt;&lt;/div&gt;
                  &lt;div class="image-preview"&gt;&lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;span class="help-inline"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group image-field "&gt;
              &lt;label class="control-label"&gt;Now Medium&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="file-field"&gt;&lt;input id="id_now_medium_image" name="now_medium_image" type="file"&gt;&lt;/div&gt;
                  &lt;div class="image-preview"&gt;&lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;span class="help-inline"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group image-field "&gt;
              &lt;label class="control-label"&gt;Now Small&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="file-field"&gt;&lt;input id="id_thumbnail_image" name="thumbnail_image" type="file"&gt;&lt;/div&gt;
                  &lt;div class="image-preview now-small"&gt;&lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;span class="help-inline"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The submit button looks like this:</p>
  
  <pre><code>&lt;div class="form-actions"&gt;
      &lt;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"&gt;&lt;span class="ui-button-text"&gt;Save changes&lt;/span&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've put a Gist of the full HTML here: <a href="https://gist.github.com/victorhooi/8277035" rel="nofollow noreferrer">https://gist.github.com/victorhooi/8277035</a></p>
  
  <p>First, I've tried using CasperJS's <a href="http://docs.casperjs.org/en/latest/modules/casper.html#fillxpath" rel="nofollow noreferrer">fill</a> method:</p>
  
  <pre><code>    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'));
  </code></pre>
  
  <p>I also did a this.capture(), and I saw that the file field had been filled in:</p>
  
  <p><img src="https://i.stack.imgur.com/o1vF7.png" alt="enter image description here"></p>
  
  <p>I'm not using the fill method's inbuilt submit, but I'm clicking on the submit button myself:</p>
  
  <p>this.click(x('//*[@id="content-wrapper"]//button/span'));</p>
  
  <p>I then do another capture, and I can see that the form has been submitted:</p>
  
  <p><img src="https://i.stack.imgur.com/X9FDl.png" alt="enter image description here"></p>
  
  <p>However, the image doesn't seem to have been uploaded at all.</p>
  
  <p>I've also tried using PhantomJS's <a href="http://phantomjs.org/api/webpage/method/upload-file.html" rel="nofollow noreferrer">uploadFile()</a> method:</p>
  
  <pre><code>this.page.uploadFile('input[name=now_large_image]', '/Users/victor/Dropbox/CMT Test Resources/Test Banners/Default Banners/now_large.jpg');
  </code></pre>
  
  <p>and then clicking on the submit button as well.</p>
  
  <p>Same issue - the form field gets filled in - however, the image itself doesn't seem to get submitted.</p>
  
  <p>Any ideas on how I can get the images to upload correctly here?</p>