File upload example

The example below show how you can create a temporary file locally in your script runtime and upload it to a HTML form.

var until = $driver.until;
var fs = require('fs');
var crypto = require('crypto');

$browser.get('http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_get').then(function(){
  return $browser.switchTo().frame(0);
}).then(function(){
  fs.writeFileSync('/tmp/upload', crypto.randomBytes(64).toString('hex'));  
  return $browser.findElement({xpath: '//*[@id="myFile"]'}).sendKeys("/tmp/upload");
}).then(function(){
  return $browser.findElement({xpath: '/html/body/button'}).click();
}).then(function(){
  $browser.wait(until.elementLocated({xpath:'//*[@id="myFile"]'}), 2000);
});
2 Likes

@rferreira: thanks for the snippet! would you be able to provide an file upload example for a modern website, example like https://support.newrelic.com/tickets/new, where user can drop and submit an attachment to be uploaded?

Hi @fred2016 are you referring to the drag and drop option to upload?

Yes, Aidan. Also, the modern UI does not usually have a file input field.
So, thinking how should I send file to such control to trigger upload.

Thanks.

acuffe NR Support
May 31

Hi @fred2016 are you referring to the drag and drop option to upload?


Visit Topic or reply to this email to respond


In Reply To
fred2016
May 27
@rferreira: thanks for the snippet! would you be able to provide an file
upload example for a modern website, example like
https://support.newrelic.com/tickets/new, where user can drop and submit an
attachment to be uploaded?


Visit Topic or reply to this email to respond

To stop receiving notifications for this particular topic, click here. To
unsubscribe from these emails, change your user preferences

Hey @fred2016

So this is untested code, but the logic should be sound,

e = $.Event('drop'); 
e.originalEvent = {dataTransfer : { files : YOUR_FILES_HERE } }; 
$('#fileDropArea').trigger(e); 

I believe this would conceptually simulate a drop action.

It would need to be in the context of a $browser.executeScript(); call to execute in context of the current frame or window.

Hopefully this helps in some way, if you can’t get it to work let me know what doesn’t seem to be working but hopefully this might help you solve the problem.

@rferreira Hi, thanks ! I’ve tried to use the script as is by copy pasting it in a new test but I get an error right away : “Error: no such element: Unable to locate element: {“method”:“xpath”,“selector”:”//*[@id=“myFile”]"}".

It’s weird because I’ve checked that the XPath expression works well in the Chrome Console…
Is this code supposed to work without any modification ?

Thanks in advance for your help.

Benjamin

Hi ,

I want to upload a notepad/text file with extension “.cfr” . I am able to create a temporary file locally during run time , however the content was not copied in the file created. The size of the created file is 0.0 MB.

Can you please help ?

Thanks
Prashant Goel

Hi @acuffe,

Good Day!

May I know how can I integrate this to the code above by @rferreira?

I mean the script above that creates a temporary file to be uploaded?

Just wanted to confirm, the above code of @rferreira will not work on a field like below screenshot, right?
image

Hi @rferreira,

I hope you can help me, my code is like below. I am not sure if I am doing it right. But I am getting an error that the element is not interactable.

.then(function(){
var until = $driver.until;
var fs = require(‘fs’);
var crypto = require(‘crypto’);
var XPATH = “/html/body/div[1]/div[2]/div/mat-dialog-container/cpos-dialog-shell/div/div[2]/div/cpos-supporting-docs-dialog/div/div[2]/cpos-form-builder/cpos-simple-row-layout[3]/div/div/div/div/cpos-simple-col-layout[1]/cpos-file-upload/section/div[1]/div[2]/div”;

return $browser.waitForAndFindElement($driver.By.xpath(XPATH) ).then(function(){
  fs.writeFileSync('/tmp/upload', crypto.randomBytes(64).toString('hex'));  
  return $browser.findElement({xpath: XPATH}).sendKeys("/tmp/upload");
}).then(function(){
  return $browser.findElement({xpath: '/html/body/button'}).click();
}).then(function(){
  $browser.wait(until.elementLocated({xpath:XPATH}), 2000);
});

})

This is the field:
image

Hi @rferreira
I am trying to upload a file in my application using the same way but it is not working. Could you please help me on that.
Find my code below:
return $browser.waitForAndFindElement($driver.By.xpath("//button[@type=‘button’]")).then(function(){

fs.writeFileSync(‘programming.txt’, data);
return $browser.findElement($driver.By.xpath("//button[@type=‘button’]")).sendKeys(“programming.txt”)}).then(function(){
// return $browser.findElement({xpath: ‘/html/body/button’}).click()}).then(function(){
})
return $browser.wait(until.elementLocated($driver.By.xpath("//button[@type=‘button’]")),4000);
console.log(“get It done---------”)

})

And also I have tried like this as code snippet given by you.
fs.writeFileSync(’/tmp/upload’, crypto.randomBytes(64).toString(‘hex’));

Find the screen shot below.