Automate file upload using Selenium and ng-file-upload

Question

I have a project where I am uploading photos via ng-file-upload and I need to automate the upload process with selenium webdriver in Python.

my HTML element looks like this:

<element
    ngf-pattern="image/*" accept="image/*"
    ngf-max-size="10MB" ngf-max-height="1000" ngf-select="addPhoto($index, $file)">
    ...</element>

Uploading the element definitely works when doing it manually. But I cannot find a way to automate this using Selenium in Python. I have tried finding the element, then sending the keys of the image's absolute path, but that just puts the absolute path in the browser's search field (as if I typed "Command + F" on Mac)

Note that there is no

<input type="file"/>

with this method of uploading a file.

Any ideas how to do this in Python using Selenium? Thanks!

alecxe · Accepted Answer · 2015-09-15 16:32:46Z

1

There has to be a file input hidden which is implicitly responsible for the file upload. For instance, the angular-file-upload DEMO page has it hidden at the bottom of a page.

Here is a working example:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


driver = webdriver.Chrome()
driver.get("https://angular-file-upload.appspot.com/")

# wait for the upload box to be visible
wait = WebDriverWait(driver, 10)
element = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div[ngf-select]")))

# get a model
model = element.get_attribute("ng-model")

# find a file input by model
file_input = driver.find_element_by_css_selector('input[ngf-select][ng-model="%s"]' % model)

# upload an image
file_input.send_keys("/absolute/path/to/dr-evil-and-minion-laughing.png")

Results into:

answered Sep 15, 2015 at 16:32

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

northsideknight Over a year ago

You're right they are at the bottom of the page, but they are hidden, so I can't send them keys, do you know how I would access them? I have been researching and it says I have to execute Javascript to set the css to make them visible, but I have my file inputs repeatable so there I don't know a way to access a single element and make it visible.

alecxe Over a year ago

@northsideknight you are right, make them visible - see, for instance, stackoverflow.com/a/25725701/771848. If you have multiple hidden elements, find them all and make them visible one by one.

Collectives™ on Stack Overflow

Automate file upload using Selenium and ng-file-upload

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