I fight with protractor because for some tests I need to UPLOAD file. My HTML looks like:
<div class="panel-footer">
<ul class="list-unstyled">
<!-- ngRepeat: file in imagesToUpload -->
</ul>
<button class="btn btn-sm btn-success pull-right ng-binding ng-hide" ng-show="imagesToUpload.length" ng-click="uploadImages()">Nahrát na server</button>
<button class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" style="overflow: hidden;">Vybrat soubory<input type="file" class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" multiple="multiple" __wrapper_for_parent_="true" style="width: 1px; height: 1px; opacity: 0; position: absolute; padding: 0px; margin: 0px; overflow: hidden;"></button>
</div>
INPUT HTML:
<input type="file" class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" multiple="multiple" __wrapper_for_parent_="true" style="width: 1px; height: 1px; opacity: 0; position: absolute; padding: 0px; margin: 0px; overflow: hidden;">
I search a lot about this issue in protractor. And basicly people advise was to COPY / PASTE path to file to input and then click "UPLOAD"
In my case there is a problem becuase input is here but it store some object not PATH
If I pick file manualy it store in HTML like:
<li ng-repeat="file in imagesToUpload" class="ng-binding ng-scope">
FileName.png <span title="remove" class="btn btn-flat glyphicon glyphicon-remove" ng-click="imagesToUpload.splice($index, 1)"></span>
</li>
Maybe this is really stupid but I am thinking if there isnt some other way how to do this? Maybe create object and send it there or something else?
Any advice is welcome.
The common and the most realistic way to upload the file via protractor/selenium is to send keys to the file
input and avoid opening the upload file dialog which you cannot control:
var uploadInput = element(by.css("input[type=file]"));
uploadInput.sendKeys("path/to/file");