Protractor - How to upload file using ng-file-upload in test case without changing code?

Question

I am using https://github.com/danialfarid/ng-file-upload for file upload. I have to test it so I wrote protractor test case but it not working.

Code

<div class="col-lg-12 up-buttons">
     <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

Test case

it('upload file', function(){   
  var fileToUpload = 'C:/Users/Anusha/Desktop/demo.csv';
  var absolutePath = path.resolve(fileToUpload);
  $('input[type="file"]').sendKeys(absolutePath);
  browser.sleep(1500);
})

I can upload file but it is received in rejFiles model instead of files model eventhough file format is correct one. Could anyone please suggest me how to do this?

Answer 1

Html

<div class="col-lg-12 up-buttons">
    <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'*.csv'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

Test case

var path = require('path');
var fileToUpload = file_path;
var absolutePath = path.resolve(fileToUpload);
element.all(by.css('input[type="file"]')).then(function(items) {
  items[0].sendKeys(absolutePath);
});
browser.sleep(500);

Answer 2

There is an issue with runtime DOM element change. So we can get element by element's runtime changed property and for file uploading case, DOM changes a property with 'input[type="file"]'.No matter if there is input tag for uploading element.

element(by.css('input[type="file"]')).sendKeys(absolutePathOfFile);