The uploadButton feature allows users to upload an image and store it locally. I utilize fileinput to select the image, and when uploadbutton is clicked, the image data is sent back to the server.
While this functionality works smoothly in Chrome, I encountered an issue with IE 10. After submitting the data to the server, the click event for uploadbutton does not trigger. I have to first click outside of the button element on the page before being able to successfully click on the button itself. Here is a snippet of my code:
<div id="fileInput">
<span class="btn-custom btn-success-custom fileinput-button"><span><a>select file</a></span>
<input type="file" id="fileupload" name="fileupload" accept="image/*" />
</span>
</div>
<div id="uploadButtonDiv" style="display: none;">
<button id='uploadButton' class="btn btn-primary">Share this image</button>
</div>
This is a segment of my script code:
angular.module('upload', []).controller("UploadController", function UploadController($scope, $http) {
$scope.$on('$viewContentLoaded', function(){
$("#uploadButton").on('click', function () {
alert('Upload image');
});
}
I have seen similar questions, but have not yet found a satisfactory solution for my specific issue.