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

Answer 1

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.