Fill a form: Select file

[Harald]

Hello CasperJS team,

how can I remotely enter the filename into that form:

<form method="post" action="file.html" enctype="multipart/form-data">
  <table>
    <tbody>
      <tr><td>Your file:</td></tr>
      <tr><td><input name="userfile_4f8ebfdc5577c" value="" size="50" type="file"></td></tr>
      <tr><td><input name="Send" value="transmit file" type="submit"></td></tr>
    </tbody>
  </table>
</form>

There's only one form on that page. The name of the input filename field always changes. I tried the following:

this.fill('form',{
  '[type="file"]':'C:\test\Test.ZIP'
},true);

and

this.fill('form',{
  'input[type="file"]':'C:\test\Test.ZIP'
},true);

Unfortunately the answer in my console was:

Error: SYNTAX_ERR: DOM Exception 12
  includes\CasperJS\modules\clientutils.js:214
  phantomjs://webpage.evaluate():4
  phantomjs://webpage.evaluate():1
  :416 in evaluate
  :488 in fill
  C:\Test\Remote.js:136
  :807 in runStep
  :212 in checkStep
FAIL CasperError: Unable to fill form

Line 136 points to "this.fill('form',{". I use the latest phantomjs and CasperJS under Windows.

Any hint appreciated!

Greetings, Harald

[Nicolas Perriault]

try to double escape your paths, eg. 'C:\\plop'

> --
> CasperJS homepage & documentation: http://n1k0.github.com/casperjs
> CasperJS @github: https://github.com/n1k0/casperjs
>
> Vous avez reçu ce message, car vous êtes abonné au groupe
> Groupe "CasperJS" de Google Groupes.
> Pour transmettre des messages à ce groupe, envoyez un e-mail à
> l'adresse casp...@googlegroups.com
> Pour résilier votre abonnement à ce groupe, envoyez un e-mail à
> l'adresse casperjs+u...@googlegroups.com
> Pour afficher d'autres options, visitez ce groupe à l'adresse
> http://groups.google.com/group/casperjs?hl=fr?hl=fr

--
Nicolas Perriault
https://nicolas.perriault.net/ — http://www.akei.com/
Skype: nperriault
Phone: +33 (0) 660 92 08 67

[Harald]

Hello Nicolas,

thank you for your answer and thank you for an extraordinary tool!

I tried:

this.fill('form',{
  '[type="file"]':'C:\\test\\Test.ZIP'
},true);

But the answer remains:

Error: SYNTAX_ERR: DOM Exception 12
  includes\CasperJS\modules\clientutils.js:214
  phantomjs://webpage.evaluate():4
  phantomjs://webpage.evaluate():1
  :416 in evaluate
  :488 in fill

  C:\test\Remote.js:136

  :807 in runStep
  :212 in checkStep
FAIL CasperError: Unable to fill form

Are my CSS selectors correct? The HTML code was in my first posting.

Regards, Harald

[Nicolas Perriault]

Ah I know, you have to use the "name" attribute value to specify each field, not a selector :)

Cheers,

[Harald]

Hello Nicolas,

unfortunately the name of the file field is never the same. It is always generated newly in each form. I fear I cannot use the "fill" command?

Harald

[Leandro Boscariol]

I believe that's true.

For these cases I extended Casper like this:

casper.setValue = function (selector, value) {

    return this.evaluate(function (selector, value) {

        __utils__.findOne(selector).value = value;

    }, {

        selector: selector,

        value: value

    });

};

Then click on the send button 'manually'.

Hope it helps!

Cheers,

--

Leandro A. Boscariol

2012/4/18 Harald <har...@ibfriedrich.com>

Hello Nicolas,

unfortunately the name of the file field is never the same. It is always generated newly in each form. I fear I cannot use the "fill" command?

Harald

[Harald]

Hello Leandro,

thank you for your help! I used your information in my Casper script under Windows:

phantom.casperPath = 'includes\\CasperJS';
phantom.injectJs(phantom.casperPath + '\\bin\\bootstrap.js');

var casper=require('casper').create();
var fileName='C:\\Test\\Test.ZIP';

casper.start('http://abc.com/myfile.html', function() {
  this.evaluate(function(fileName) {__utils__.findOne('input[type="file"]').setAttribute('value',fileName)},{fileName:fileName});
  this.echo('Name='+this.evaluate(function() {return __utils__.findOne('input[type="file"]').getAttribute('name')}));
  this.echo('Value='+this.evaluate(function() {return __utils__.findOne('input[type="file"]').getAttribute('value')}));
  this.click('input[name="send"]');
});

casper.then(function() {
  casper.exit();
});

casper.run(function() {
  this.echo('All Done.');
});

It took a moment until I understood that I cannot use global variables in an evaluate function directly. Finally I got it.

Harald

[Harald]

Oh, I forgot the red line with the uploadFile command:

casper.start('http://abc.com/myfile.html', function() {
  this.evaluate(function(fileName) {__utils__.findOne('input[type="file"]').setAttribute('value',fileName)},{fileName:fileName});
  this.echo('Name='+this.evaluate(function() {return __utils__.findOne('input[type="file"]').getAttribute('name')}));
  this.echo('Value='+this.evaluate(function() {return __utils__.findOne('input[type="file"]').getAttribute('value')}));

  this.page.uploadFile('input[type="file"]',fileName);

  this.click('input[name="send"]');

});

Now it works! Really cool!

Greets Harald

[Leonardo Pucci]

Hello Harald, 

I know this thread is old, but just to let you (and others) know that i have tried your code, and the only line that is doing the job is the page.uploadFile.

Like this:

var fileName='C:\\Test\\Test.ZIP'; //DOUBLE QUOTES ARE REALLY IMPORTANT AND A REAL FILE IN THE PATH TOO!

casper.start('http://abc.com/myfile.html', function() {

  this.page.uploadFile('input[type="file"]',fileName);

  this.click('input[name="send"]');

});

Regards,

Pucci

On Thursday, April 19, 2012 at 12:45:32 PM UTC-3, Harald wrote:

Oh, I forgot the red line with the uploadFile command:

casper.start('http://abc.com/myfile.html', function() {