Upload image through MacOS window with Selenium

Question

Set-up

I'm using Python 3.x and Selenium to work on the back-end of a webshop.

I need to upload a product image from my computer on the platform's back-end.

Problem

The image Upload button is clickable with Selenium, however clicking results in a MacOS file picker popping up.

Selenium doesn't work on the MacOS file picker. I have searched how to solve this problem and found the following answers,

However, none of this works.

The html around the button is,

<td class="control">


<div class="hide-input">
    <input data-val="true" data-val-required="The Image field is required." id="FileName" name="FileName" type="text" value="File636578585362423712.png">
</div>

<div id="uploadifive-FileNameUpload" class="uploadifive-button" style="height: 18px; line-height: 18px; overflow: hidden; position: relative; text-align: center; width: 50px;">Upload<input id="FileNameUpload" type="file" name="FileNameUpload" data-editor="#FileName" data-url="http://also-inc.demohoster.com/upload/uploadfile" data-path="~/UserFiles/Products/Images/" data-maxsize="10240" data-extensions="*.jpg;*.jpeg;*.png;*.gif;*.bmp;" data-thumbnailwidth="128" data-thumbnailheight="128" data-thumbnailpath="/UserFiles/Products/Images/Preview/" data-uniquename="True" data-preview="/UserFiles/Products/Images/Preview/File636578585362423712.png" data-isnew="false" data-auth="2CDE59B99D5F034087CA006254189C31F4388BA02DDE1CD1752A2FCFDE6EB556406CAF9D82DE4E02AC4D7D9813E2CF8B2A1413EF7CE8CA22FDD9822130B4EC239F1BD305F8AA1E5F6E9EFD1CD64138B8A621A88A675A3A528B7DF2F0388C36C473CBAD080CF826A28A3464FB719D039690241E38" data-session="jx134u0kcaxfu4jz1darurvg" class="file-uploader hide-input" style="display: none;"><input type="file" style="font-size: 18px; opacity: 0; position: absolute; right: -3px; top: -3px; z-index: 999;"></div>
<div id="uploadifive-FileNameUpload-queue" class="uploadifive-queue"></div>
</td>

Tries

I've tried clicking the button and then sending keys,

browser.find_element_by_id('uploadifive-FileNameUpload').click()
browser.find_element_by_id('uploadifive-FileNameUpload').send_keys('path/to/MyImage.jpeg')

(also tried id 'uploadifive-FileNameUpload-queue' and id 'FileName' in all possible combinations)

And I've tried sending without clicking, i.e. browser.find_element_by_id('uploadifive-FileNameUpload').send_keys('path/to/MyImage.jpeg'). Again for all keys.

Whatever I try, I keep getting a ElementNotInteractableException.

This is the first time I'm trying to upload an image this way, and I'm stuck.

How do I fix this?

You need to find the INPUT that contains type="file". That's the one you want to .send_keys() to (not click). — JeffC
– JeffC, Commented Mar 28, 2018 at 20:24

Florent B. · Accepted Answer · 2018-03-28 17:18:38Z

8

Disable the file picker and call sendKeys on an <input type="file"> which is by design the only type of element allowed to receive/hold a file:

# disable the OS file picker
browser.execute_script("""
    document.addEventListener('click', function(evt) {
      if (evt.target.type === 'file')
        evt.preventDefault();
    }, true)
    """)

# make an <input type="file"> available
browser.find_element_by_id('uploadifive-FileNameUpload')\
    .click()

# assign the file to the <input type="file">
browser.find_element_by_css_selector('input[type=file]')\
    .send_keys('path/to/MyImage.jpeg')

answered Mar 28, 2018 at 17:18

Florent B.

42.7k7 gold badges92 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LucSpan Over a year ago

Hi Florent, thank you for thinking with me. Disabling the OS file picker seems to work fine. Assigning the file to the <input type ="file"> still gives an

ElementNotInteractableException: Element <input id="FileNameUpload" class="file-uploader hide-input" name="FileNameUpload" type="file"> is not reachable by keyboard

. I've tried changing the css_selector to xpath or id, but doesn't work either.

Florent B. Over a year ago

Which browser/version are you using? It could be that the driver doesn't support hidden input file. Note that your code has a second input which can be located with input + input[type=file].

Collectives™ on Stack Overflow

Upload image through MacOS window with Selenium

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related