How to close file upload dialogue after click on upload button in protractor

Question

I want to upload an image file in protractor. the problem is i can not get "input[type = "file"]" element without clicking on upload button.

when I click upload button, file upload dialogue popup opens.

i have tried

browser.actions().sendKeys(protractor.Key.ESCAPE).perform(); but it does not work.

This is what I am doing:

var image = '../images/image1.png';
var absPathImg = path.resolve(__dirname, image);
element(by.id('uploadImage')).click();
browser.actions().sendKeys(protractor.Key.ESCAPE).perform();
element(by.css('input[type=file]')).sendKeys(absPathImg);
element(by.id('upload')).click();

How can i close that file upload dialogue to upload an image?

score 1 · Answer 1 · answered Dec 08 '17 at 20:56

1

Try it like this. I used this for Protractor, but I think it's similar for Selenium. I also have a problem for Windows File dialog not closing. This is how I solved that:

element(by.css('elementForOpenDialog')).sendKeys(absPathImg);

Send Keys to the element which will open file dialog, not click on element to open file dialog. Just send to that element absolute path and it will upload without opening dialog. It's worked for me. Good Luck!

answered Dec 08 '17 at 20:56

Dušan

19
6

This is the way to avoid OS dialogue. But in my case, you have to click the button to upload the pic. and when you click the upload button, OS dialogue pops up. this is the prototype in my case.I have to close the OS dialogue. Without doing this, I can not send the path to element. – chirag panchani Dec 10 '17 at 13:29
I see the point. I had the same issue with OS dialogue, and I solved that issue by avoiding dialog. – Dušan Dec 11 '17 at 18:20

Juha · Answer 2 · 2018-11-08T12:23:05.877

This is an old thread but I'll answer in case anyone else runs to this problem.

I had to solve this same problem today. I was able to work around opening the upload dialog, because I am quite sure it cannot be closed without some external libraries and that would not work in headless mode.

You need to inspect the javascript linked to the upload button's click event and execute some script before sending keys to the file input.

This is individual to each case, but in my case i had to do this (Python):

script = (
        "var url = '/Contacting/UploadCsv'; "
        "$('#buttonFileUpload').data('url', url);"
        )
driver.execute_script(script)
driver.find_element_by_id('buttonFileUpload').send_keys(csv_path)

I picked that script from the JS function linked to the button.

score 0 · Answer 3 · answered Jan 12 '23 at 11:05

I landed here because I was searching on HOW TO CLOSE AN IMAGE WHEN CLICKED

In case that helps someone. So what I did.

var Img = Driver.FindElement(XPath.News.YourImg); Img.Click();

        try
        {
            Img.Click();
            Assert.IsFalse(feedImg.Displayed);
        }catch(Exception ex)
        {

        }

This way you can check if the image is closed by trying to click on it again.

score -1 · Answer 4 · answered Jul 08 '17 at 19:27

Instead of clicking on to ESCAPE, why not simulate the ENTER key press to simulate a person entering the path and pressing the ENTER key to upload the image.

I am doing this in my code and this works perfectly fine.

var path = require('path')
this.fileUploadOne = element(by.css('locator_to_element'));

var fileUpload = 'path_of_file_to_upload'

    absolutePath = path.resolve(__dirname,fileUpload);
    console.log(absolutePath);
    this.fileUploadOne.sendKeys(absolutePath);
    browser.actions().sendKeys(protractor.Key.ENTER).perform();

    //just for debugging purposes.
    browser.sleep(20000);

as i mentioned above, element "element(by.css('locator_to_element'));" can be presented after closing file upload OS dialogue. i have to close that before i call some browser actions. — chirag panchani, Jul 10 '17 at 13:24

How to close file upload dialogue after click on upload button in protractor

4 Answers4