how to do image upload from a folder in selenium webdriver java

Question

I am automating mobile website using selenium. In my test case I need to upload image. There is one camera image with id addimage on click of which file upload popup is shown. Check images of this flow

enter image description here

HTML code for this :

<div class="clearfix">
    <ul id="imageList"> </ul>
   <div id="uploadimginput">
       <a id="addimage" class="sprite camera"> </a>
   </div>
   <input id="image" class="w0" type="file" name="image">
</div>

Multiple image upload : enter image description here

enter image description here

From file upload popup i want to open a folder "testimages" and then select an image.

How can I do this in selenium java.

Can you please add the html code snippet of the "camera image" ? Then, it will be clear, if there is a need to use Robot/Sikuli/Autoit or just sendKeys("path to the file") will do the trick, as @Jonas suspects .. — Subh
– Subh, Commented Dec 16, 2014 at 12:52
Please check my updated answer below, for multiple file upload and let me know if it worked out for you or you faced any problems while executing the code. — Subh
– Subh, Commented Dec 18, 2014 at 8:03

Jonas · Accepted Answer · 2014-12-16 12:55:57Z

1

Don't click on the image itself so that the popup will not appear.

In your html code there should be an input element with type file. In your Selenium test you can find the input element and fill it with the path of the image you want to add. Then submit the form around the input element.

The Selenium framework will handle the rest for you. For me it works fine with all browsers.

I think its a cleaner solution than simulation a keyboard.

edited Dec 16, 2014 at 12:55

answered Dec 16, 2014 at 12:48

Jonas

371 silver badge7 bronze badges

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

7 Comments

Subh Over a year ago

It is, infact, the cleaner one.. But, sometimes the 'input tag' doesn't have the 'type' attribute as file, mostly in case where you can do multiple file uploads. Here, you don't have any other choice rather than clicking on the button, which brings about the dialog box as the OP is getting. Thus, it begs for an alternative.. :)

NJF Over a year ago

In html code there is an input element with type file but I also want to multiple image upload. Also once image is uploaded I want to remove it by clicking on close button which is to be done before submitting the form.

Subh Over a year ago

@NJF: Is multiple file upload allowed for your case ? I mean, when manually done, can you do multiple files upload ?

NJF Over a year ago

@Subh yes. When you upload one image it is shown as thumbnail and next to it add image button shown.

Subh Over a year ago

@NJF: Can you please add images of that as how this looks like before and after one image upload ?

|

Subh · Accepted Answer · 2014-12-18 08:07:43Z

0

From what I can see, this is a Window dialog box and it is out of the context of browser, and hence can't be automated directly by Selenium. Hence, you will have to use Robot/Sikuli/Autoit for that.

Below code is the way by using "Robot class" . For using this, do import all the classes from "java.awt package" namely java.awt.Robot, java.awt.event.KeyEvent, java.awt.Toolkit, java.awt.datatransfer.StringSelection, java.awt.AWTException alongwith the rest necessary imports:

Edited the Code for multiple file upload (Works in FF, IE and Chrome):

//Code for clicking on the image button that brings up the window dialog box
  ...

//Putting all the absolute paths of the pics to upload(here, 3 files)
String arr[] = {"\"D:\\Pic1.jpg\"", "\"D:\\Pic2.jpg\"", "\"D:\\Pic3.jpg\""};

//Copying the path of the file to the clipboard     
StringSelection photo = new StringSelection(arr[0]+arr[1]+arr[2]); //Putting the path of the image to upload
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(photo, null);

//Pasting the contents of clipboard in the field "File name" of the Window Pop-up
Thread.sleep(5000); //Some sleep time to detect the window popup
Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);

//To Click on the "Open" button to upload files
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);

edited Dec 18, 2014 at 8:07

answered Dec 16, 2014 at 12:47

Subh

4,4241 gold badge17 silver badges33 bronze badges

6 Comments

NJF Over a year ago

why are you adding 3 array element StringSelection photo = new StringSelection(arr[0]+arr[1]+arr[2]) @Subh

Subh Over a year ago

These all are the paths of 3 different images I want to upload as have been put in the array arr[]. arr[0] signifies "D:\\Pic1.jpg", arr[1] signifies "D:\\Pic2.jpg" , and arr[2] signifies "D:\\Pic3.jpg"

NJF Over a year ago

that I understood but it is not helping in multiple image upload. Every time i run the code with arr[0]+arr[1]+arr[2] or with just arr[0] only one image which is the first array element is getting uploaded. for multiple image upload i need to call this code with different array elements on click of next button @Subh

Subh Over a year ago

Can you please tell what exactly are you putting in the String array arr[] and also in the arguments of StringSelection method ?

NJF Over a year ago

String arr[] = {"\"C:\\Users\\work\\Desktop\\test\\0price.png\"","\"C:\\Users\\work\\Desktop\\test\\img2.jpg\""}; StringSelection photo = new StringSelection(arr[0]+arr[1]);

|

Collectives™ on Stack Overflow

how to do image upload from a folder in selenium webdriver java

2 Answers 2

7 Comments

Edited the Code for multiple file upload (Works in FF, IE and Chrome):

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Edited the Code for multiple file upload (Works in FF, IE and Chrome):

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related