How to automate the bootstrap fileupload upload control using webdriver

Question

I want to automate the file uploading process which is using a file upload control built in bootstrap. I am doing the same using webdriver. Below is my code, but unfortunately it is not working:

element=driver.findElement(By.xpath("//[@id='upload']/fieldset/div[2]/input[1]"));
element.sendKeys(pathToFile);

It is giving an element not visible error.

Here is the example of the bootstrap fileupload control which I am trying to automate- Via JavaScript: on this URL http://markusslima.github.io/bootstrap-filestyle/ Please see below style-

$(":file").filestyle({icon: false});

Answer 1

Ok. i think i solved it.

    WebElement fileInput = driver.findElement(By.id("document"));

    JavascriptExecutor js = (JavascriptExecutor) driver;
    WebElement element = driver.findElement(By.id("document"));
    js.executeScript("arguments[0].setAttribute('style', 'left:30px')",
            element);

    fileInput.sendKeys(fileName);

the bootstrap-filestyle.js hide a input element so you have to move it to the visible area and then set it in the standard way.

so much trouble for such a simple solution.

Here is my original html code:

<span id="documentUpload">
    <input type="file" id="document" name="document" class="notMandatory" onkeypress="return noenter(event)" tabindex="-1" style="position: absolute; left: -9999px;">
    <div class="bootstrap-filestyle" style="display: inline;" tabindex="0">
        <input type="text" class="input-xlarge" disabled="" autocomplete="off"> 
        <label for="document" class="btn"><i class="icon-folder-open"></i> <span>Upload</span></label>
    </div>
</span>