Upload file using selenium to bootsrap-fileinput with geckodriver

Question

I would like to know how to upload a file to a bootstrap-fileinput element using Selenium with the FirefoxDriver. I tried

WebElement input = letter.findElement(By.cssSelector("#letter input"));
input.sendKeys("/home/me/loremIpsum.pdf");

I get

org.openqa.selenium.InvalidArgumentException: File not found: /home/me/loremIpsum.pdf

Of course the file /home/me/loremIpsum.pdf does exist.

The same code works using the chromedriver.

I've put together a jsfiddle to show the fileinput button: https://jsfiddle.net/yscgx2zc/

The rendered html from my app (copied from Firefox developer console) looks like this. Find the input element close to the bottom.

<div id="letter" class="form-group"><label class="control-label">The Letter<span>*</span></label><div class="file-input file-input-new"><div class="file-preview ">
    <div class="close fileinput-remove">×</div>
    <div class="file-drop-disabled">
    <div class="file-preview-thumbnails">
    </div>
    <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>
    <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
    </div>
</div>
<div class="kv-upload-progress hide"><div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
        0%
     </div>
</div></div>
<div class="input-group file-caption-main">
   <div tabindex="500" class="form-control file-caption  kv-fileinput-caption">
   <div class="file-caption-name"></div>
</div>

   <div class="input-group-btn">
       <button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i>  <span class="hidden-xs">Remove</span></button>
       <button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i>  <span class="hidden-xs">Cancel</span></button>

       <div tabindex="500" class="btn btn-primary btn-file">
       <i class="glyphicon glyphicon-folder-open"></i>&nbsp;  <span class="hidden-xs">Browse …</span>
       <input data-show-upload="false" data-allowed-file-extensions="[&quot;pdf&quot;]" data-allowed-file-types="[&quot;pdf&quot;]" accept="application/pdf" class="file" id="1502961793221" type="file"></div>
   </div>
</div></div></div>

Answer 1

You can try with the following code block:

WebElement input = letter.findElement(By.xpath("//input[@id='1502957288010']"));
input.sendKeys("/home/me/loremIpsum.pdf");

Answer 2

Just tried to upload a file to http://plugins.krajee.com/file-basic-usage-demo, which is a demo page for specified bootstrap file input.

Works both on Firefox and Chrome. The only issue was with input visibility. When I made it visible, I was able to upload a file.

However, your error message seems pretty obvious to me. Your file wasn't found on disk. Describe your environment please. Are you using local or remote WebDriver? As in case of remote, this file should be present on target VM, where browser is started.