How to do file POST with CasperJS through plain Javascript, not through UI - upload

Question

I can't figure out how to do the following:
Before running my tests I would like to post (multipart) a file to the server. Our backend creates content profiles for these uploads which can then be accessed through the UI. It's this content profile I need to run tests on.
I am aware of the .fill() functionality but this does not apply as I do not want to do file uploads through the UI. Is there any way this can be achieved via CasperJS or javascript or can anyone point me to documentation that might help me?

Answer 1

As far as I have read the documentations of both casperjs and phantomjs, direct file submissions are not allowed. You may use curl like below:
curl http://some.testserver.com/post.php \
-F file_input=#/path/to/my/file.txt \
-F "text_field=Some Text Here" \
-F some_number=1234
You can however open a POST request on casperjs:
casper.start();
casper.open('http://some.testserver.com/post.php', {
method: 'post',
data: {
'title': 'Plop',
'body': 'Wow.'
},
headers: {
'Content-type': 'multipart/form-data'
}
});
casper.then(function() {
this.echo('POSTED it.');
});
casper.run();
Here is the relevant documentation:
http://docs.casperjs.org/en/latest/modules/casper.html#open

Answer 2

Check this.page.uploadfile, as the phantom browser does not have an ui to select the file, you can use it to point to file name, then hit submit.
phantom.casperPath = '{PATH_TO_CASPER_JS}';
phantom.injectJs(phantom.casperPath + '\\bin\\bootstrap.js');
var system = require('system')
var page = require('webpage').create();
var casper = require('casper').create();
function getReturnedText() {
return document.querySelector('#ocr-result').innerText;
}
casper.start('http://www.newocr.com/', function() {
this.page.uploadFile('input[type="file"]', '{PATH_TO_JPEG}');
this.click('button[name="preview"]');
});
casper.thenEvaluate(function() {
this.click('button[name="ocr"]');
});
casper.run(function() {
this.echo(getReturnedText());
phantom.exit(1);
});

Answer 3

Try this:
casper.thenOpen('about:blank', function(){
this.evaluate(function(){
var action = 'upload.php'
var html = '<form action="'+action+'" method="post" enctype="multipart/form-data">'
html += '<input type="file" name="files[]" multiple="multiple">'
html += '<button type="submit">Submit</button>'
html += '</form>'
document.write(html)
})
this.fill('form',{
'files[]': 'file.txt'
}, true)
this.waitFor(function(){
var uri = casper.evaluate(function(){
return document.documentURI
})
if ( 'about:blank' === uri ){
return false
}
return true
})
})