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. :)

Try this [answer](http://stackoverflow.com/a/21314337/4711957) it may help you. — Massi Issar, Oct 07 '16 at 15:42
Please see "[ask]" and the linked pages and "[MCVE](https://stackoverflow.com/help/minimal-reproducible-example)". We appreciate that you might be new, but we do expect evidence of the effort you've put into this. Where did you search? Why didn't it help? If it did, where is the code you wrote to test what you learned? If you didn't write code, why not? If you did, what is the minimal code that demonstrates the problem you encountered, along with the explanation of the problem, and the minimal input data and the expected result? Without that it's hard to help you. — the Tin Man, Feb 17 '20 at 04:46

score 14 · Accepted Answer · edited Feb 17 '20 at 04:47

14

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

edited Feb 17 '20 at 04:47

the Tin Man

158,662
42
215
303

answered May 26 '16 at 11:12

Manuli

1,203
4
20
43

Quick and simple. Thanks Quality Products. :) – May 26 '16 at 11:23
this is not working with android hybrid application testing (protractor+appium). my file input selector element(by.css('[id="fileLabtest"]')).sendKeys('/home/myPC/Pictures/fingerpointing.jpg'); – Uttam Panara May 31 '18 at 10:54
The sleep + executeScript fixed an issue I had where randomly, the file was not uploaded. Now the test succeeds everytime. – edi9999 Feb 22 '19 at 09:40
file upload code works for me but when I have my project folder in any other driver other then Desktop, so how can I get my file to be picked from a folder which is on Desktop? my code is "var absolutePath = path.resolve(__dirname, fileToUpload); var input = element(by.css('input[type=file]')); input.sendKeys(absolutePath);" – Suhail Ahmed Mar 14 '20 at 19:25
This worked for me. I struggled for a while using my own version of the browser.executeScript() part. If you read this - follow it to the letter before modifying for your own code – proxima-b Jan 19 '21 at 16:51

score 1 · Answer 2 · answered Jul 29 '17 at 12:10

        [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");
                                });
                              });
                            });

score 1 · Answer 3 · answered Feb 16 '20 at 14:49

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();
},

answered Feb 16 '20 at 14:49

bhargava krishna

63
2

It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – the Tin Man Feb 17 '20 at 04:45

How do I upload a file using protractor

3 Answers3

Linked