How to upload file using Protractor to the ng-file-upload element

Question

The HTML is as follows:
<input type="file" style="display: none" ng-file-select="" ng-file-change="upload($files)" ng-multiple="multiple" accept=".jpg,.png">

I need to upload file to the element which uses ng-file-upload for uploading image file using Protractor:

var uploadFile = element(by.css('input[type="file"]'));
uploadFile.sendKeys('C:\\Temp\\test.png');
uploadFile.evaluate("openMetadataDialog({file:imgFile})");

The above is however not working. I am not able to understand how to upload the file! As per my understanding, as soon as I sendkeys to input element, the upload function should be called itself! However, that does not seem to be happening!

Regards,
Sakshi

I am not sure about the 3rd line - why are you calling openMetadataDialog()? Is there a submit button on a form that contains the file input? Thanks. — alecxe
– alecxe, Commented Mar 17, 2015 at 5:42
Yes. There is a Submit button which sends the File and some metadata regarding the file(description etc) — Sakshi Singla
– Sakshi Singla, Commented Mar 17, 2015 at 6:16
I think you just need to click that submit button after sending keys to the file input. — alecxe
– alecxe, Commented Mar 17, 2015 at 6:18
That used to work when ng-file-upload was not used at the backend for file upload. — Sakshi Singla
– Sakshi Singla, Commented Mar 17, 2015 at 6:46
@alecxe: Any idea bout the above info? Is there a way in which I can pass a new File() parameter to openMetadataDialog function? — Sakshi Singla
– Sakshi Singla, Commented Mar 19, 2015 at 7:05

Dmitri Zaitsev · Accepted Answer · 2015-05-16 13:26:18Z

2

It seems that ng-file-upload doesn't react to .sendKeys(...), its file-change doesn't get invoked. You can use standard onchange event to invoke some custom upload logic:

<input type="file" 
       style="display: none"     
       onchange="angular.element(this).scope().upload(this)" 
       ng-file-select 
       ng-multiple="multiple" 
       accept=".jpg,.png">

this points to the input element which has a property files.

edited May 16, 2015 at 13:26

Dmitri Zaitsev

14.2k12 gold badges79 silver badges115 bronze badges

answered Mar 23, 2015 at 10:18

Suula

461 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

How to upload file using Protractor to the ng-file-upload element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related