Cannot upload file using PhantomJs (and Selenium WebDriver)

Question

What I'm working with:

To start off, my HTML looks the following:

<form action="http://example.com/upload_photo_iframe.html" preview_div="upload_photo_div" submit_button="submit_btn" upload_field="photo_upload" target="photo_target" enctype="multipart/form-data" method="POST" id="uploadfile" name="uploadfile">
    <input type="hidden" value="CSRF_iframe_photo_upload" name="csrfname">
    <input type="hidden" value="3350427f0f068509081a09e283607214001b6912843ffb937b934208c91d9041c88faf0e66df4f3898ef202a34b669647f5b3fd9a2122e389acd3f53c33fc88b" name="csrftoken">
    <label class="file-upload">
            <p id="upload_text">Click Browse to choose a file then click Upload</p>
            <input type="file" class="file" id="photo_upload" name="photo_upload" accept="image/*">
    </label>
    <input type="hidden" value="true" name="makeLargeThumb">
    <input type="hidden" value="p" name="size">
    <input type="hidden" value="P" name="type">
    <input type="hidden" value="5120000" name="MAX_FILE_SIZE">
    <input type="hidden" value="0" name="album_id" class="album_id_hidden">
    <input type="submit" class="grey_btn" id="upload_btn" value="Upload" name="submit_btn">
<input type="hidden" name="callback" value="document.forms.uploadfile.handleReceive"><input type="hidden" name="fieldName" value="photo_upload"></form>

I posted the entire thing, the file input is the following part:

<input type="file" class="file" id="photo_upload" name="photo_upload" accept="image/*">

My situation:

I'm using Selenium WebDriver with PhantomJs (C#). Before this I used FireFox instead of PhantomJs and uploaded a file the following way:

_driver.FindElement(photoUploadPath).SendKeys(imagePath);

My issue:

However this crashes when I use PhantomJs.

My attempt to solve the issue:

I found the following thread discussing the issue: https://github.com/ariya/phantomjs/issues/10993

And I tried the proposed solution:

((PhantomJSDriver)driver).executePhantomJS("var page = this; page.uploadFile('input[type=file]', '/path/to/file');");

However, while this doesn't throw an error it doesn't upload the file.

After having searched far and wide my only option is to ask here, hoping someone can help me out.

It seems to me that this is a common problem for many people using PhantomJs+Selenium and it makes me wonder why this bug has yet to be fixed.

Answer 1

Just faced the same issue today and resolved it. File upload functionality is broken in PhantomJS 2.0. Please check this thread https://github.com/ariya/phantomjs/issues/12506 for more information.

So generally you should make a custom build of PhantomJS browser (or wait for official fix) and use the script already mentioned above:

((PhantomJSDriver)driver).executePhantomJS("var page = this; page.uploadFile('input[type=file]', '/path/to/file');");

Please note that some custom builds are already available in the thread (I took a custom build for Windows there).