I try to implement a profile picture upload with angularjs and bootstrap using ng-flow module. In safari it works fine but in chrome the request just won't work. Its showing me "Caution: the request is not finished yet"
Here is a screenshot:
I tried to disable all chrome extensions etc. but its still not working. Another thing I noticed (I dont know if its related to my initial problem) is a weird missplaced border of a button which also seems to only appear in chrome.
Code from my view:
<div class="row">
<div class="col-md-12">
<h2 style="text-align: center">edit your profile</h2>
</div>
<div ng-controller="uploadCtrl" flow-init="{singleFile:true}" flow-name="uploader.flow" flow-files-added="processFiles($files)">
<div class="form-group">
<button flow-btn class="btn btn-primary btn-sm" flow-attrs="{accept:'image/*'}">Upload Profile Picture</button>
</div>
<div class="thumbnail" ng-show="$flow.files.length">
<img class="preview" flow-img="$flow.files[0]"/>
</div>
<button class="btn btn-primary btn-sm" ng-show="$flow.files.length" ng-click="save()">save</button>
</div>
</div>
Controller:
angular.module("myController").controller('uploadCtrl', function($scope, profileService) {
$scope.imageStrings = [];
$scope.processFiles = function(files){
angular.forEach(files, function(flowFile, i){
var fileReader = new FileReader();
fileReader.onload = function (event) {
var uri = event.target.result;
$scope.imageStrings[i] = uri;
};
fileReader.readAsDataURL(flowFile.file);
});
};
$scope.save = function(){
var image = $scope.imageStrings[$scope.imageStrings.length -1];
console.log(image)
profileService.postProfilePicture.postProfilePicture(JSON.stringify(image),function(res) {
console.log("success");
}, function(error) {
$scope.error = true;
});
};
});
EDIT:
I think its somehow related to the filesize. In chrome all imageformats work if they are pretty small (< 0.5mb or smth. like that, nothing huge).