I struggle with using protractor because some tests require file uploads. This is an example of my HTML structure:
<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()">Upload to Server</button>
<button class="btn btn-sm btn-primary ng-binding" ng-file-select="onImageSelect($files)" data-multiple="true" style="overflow: hidden;">Choose Files<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>
Here is the 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 have researched extensively on this problem with protractor, and most suggestions revolve around manually pasting the file path into the input field and then clicking "UPLOAD". However, in my case, the issue is that the input stores an object rather than a PATH.
If I manually select a file, it shows up in the HTML like this:
<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>
I'm wondering if there might be another approach to solving this issue. Perhaps creating an object and sending it there or something similar?
Any advice would be greatly appreciated.