How to upload files in filepicker using protractor?

Question

Here is HTML code:

<input type="file" class="fileUploadInput" name="fileUpload" id="fileUploadInput" accept="application/msword,application/pdf,text/plain,application/rtf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.formula" multiple="multiple" title="Choose File">

Here is my code:

 browser.wait(function(){
            return element(by.id('.filepicker_dialog_container')).isPresent();
        }).then(function() {
            browser.driver.switchTo().frame('.filepicker_dialog');
        }).then(function(){
            var fileToUpload = '/home/raghavendra/Desktop/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
            var absolutePath = protractor.basePath.resolve(__dirname, fileToUpload);
            $("#fileUploadInput").sendKeys(absolutePath);
});

I am doing like this, now am not getting any error but it is not uploading the file. The pop up window is not closing now.

Here is my complete code:

  var path = require('path');
var ptor = browser,
    driver = browser.driver;

describe('Hirealchemy roles', function() {

    it('while clicking filepicker icon', function () {


        $('.icon-people').click();
        browser.sleep(5000);
        browser.driver.findElement(By.xpath('/html/body/div[4]/div/ng-view/div/div/div[2]/' +
                                            'section/div/div/div[1]/form/div[2]/input')).sendKeys(group_name);
        browser.sleep(5000);
        element.all(by.css('.btn.btn-main')).click();
        browser.sleep(5000);

        browser.wait(function(){
             return element(by.id('filepicker_dialog')).isPresent();
        })
            .then(function(){
                ptor.switchTo().frame('filepicker_dialog');
            })

            .then(function(){
                 var fileToUpload = '/home/raghavendra/Desktop/50_resumes/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
                 var absolutePath = path.resolve(__dirname, fileToUpload);
                 driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);
            })

            .then(function(){
                ptor.switchTo().defaultContent();
            })

            .then(function(){
                browser.wait(function(){
                    var deferred = protractor.promise.defer();
                    element(by.id('filepicker_dialog')).isPresent()
                        .then(function(present){
                            deferred.fulfill(!present);
                        });
                    return deferred.promise;

                });
            });
    });
})

This code is working.

Answer 1

This code is working:

var path = require('path');
var ptor = browser,
    driver = browser.driver;

describe('Hirealchemy roles', function() {

    it('while clicking filepicker icon', function () {


        $('.icon-people').click();
        browser.sleep(5000);
        browser.driver.findElement(By.xpath('/html/body/div[4]/div/ng-view/div/div/div[2]/' +
                                            'section/div/div/div[1]/form/div[2]/input')).sendKeys(group_name);
        browser.sleep(5000);
        element.all(by.css('.btn.btn-main')).click();
        browser.sleep(5000);

        browser.wait(function(){
             return element(by.id('filepicker_dialog')).isPresent();
        })
            .then(function(){
                ptor.switchTo().frame('filepicker_dialog');
            })

            .then(function(){
                 var fileToUpload = '/home/raghavendra/Desktop/50_resumes/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
                 var absolutePath = path.resolve(__dirname, fileToUpload);
                 driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath);
            })

            .then(function(){
                ptor.switchTo().defaultContent();
            })

            .then(function(){
                browser.wait(function(){
                    var deferred = protractor.promise.defer();
                    element(by.id('filepicker_dialog')).isPresent()
                        .then(function(present){
                            deferred.fulfill(!present);
                        });
                    return deferred.promise;

                });
            });
    });
});

Answer 2

Don't click the "Choose File" button. When you click it, a browser's Select File dialog would appear. You would not be able to control this dialog since it is out of selenium webdriver's scope.

Instead, send the keys to the input with an absolute path to the file to upload:

$("#fileUploadInput").sendKeys("/absolute/path/to/file");

---

In your particular case, do:

var EC = protractor.ExpectedConditions;
var picker = element(by.id('.filepicker_dialog_container'));

browser.wait(EC.presenceOf(picker), 5000);
browser.switchTo().frame($('.filepicker_dialog'));

var fileToUpload = '/home/raghavendra/Desktop/f0657c76d96b9ddab5562b8391297dbbb01488fec4e79a4c13195aea.doc';
var absolutePath = protractor.basePath.resolve(__dirname, fileToUpload);
$("#fileUploadInput").sendKeys(absolutePath);