How do I upload a file using protractor

Question

I'm writing a protractor script that need to upload a JPEG image. I could click on the upload button which opens up a windows file selector. But, then I need to write the path to a file in that File Selector dialog using protractor.

But, i have no idea how it works. I tried just typing the path using sendKeys and it doesn't work so far.

Anyone have an idea how to do this?

Thanks. :)

Answer 1

 uploadFile: async (locator, filepath) => {
  absolutePath = path.resolve(filepath);
  click(locator);
  element(by.css('input[type="file"]')).sendKeys(absolutePath);
  await sleep(10000, "wait to close window");
  await closePopup();
},

Answer 2

Try my answer in "How can I control the windows File Selector using protractor".

If you need a quick solution try the following solution:

// set file detector
var remote = require('../../node_modules/protractor/node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());


var fileToUpload = '../sample.txt';
var absolutePath = path.resolve(__dirname, fileToUpload);

var fileElem = element(by.css('input[type="file"]'));

// Unhide file input
browser.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px';  arguments[0].style.opacity = 1", fileElem.getWebElement());

fileElem.sendKeys(absolutePath);

// take a breath 
browser.driver.sleep(100);

// click upload button
element(by.css('button[data-ng-click="uploadFile(file)"]')).click(); // does post request

Answer 3

        [settingsEditProfile_page.settingsEditProfile_UploadImageButton()][1].isDisplayed().then(function () {
                  helperUtil.addStep("User redirected to Edit Profile page");            settingsEditProfile_page.settingsEditProfile_UploadImageButton().sendKeys(absolutePath).then(function () {
                  helperUtil.addStep("User clicked on upload button and uploaded new image");
                  browser.driver.sleep(3000);

  settingsEditProfile_page.settingsEditProfile_Save().click().then(function () {
         helperUtil.addStep("User clicked on SAVE button");
                                });
                              });
                            });