I am currently working on a straightforward example where I have a file input field and a text input field. The goal is to update the text input with the value of the selected file once a file is chosen.
Here is an overview of my code:
<input id="selectedFiles" type="text" ng-model="selectedFiles" placeholder="No file(s) chosen">
<input id="file" type="file" name="file" multiple onchange="angular.element(this).scope().fileChange()">
Since ng-change doesn't work for input-type file, I'm using the onchange method as shown above.
On the JavaScript side, my code looks like this:
$scope.selectedFiles = "";
$scope.fileChange = function () {
file = document.getElementById("file");
$scope.selectedFiles = file.value;
}
Even though I am updating the model value in the onchange function, the UI doesn't seem to reflect the changes, even though the input is bound through the selectedFiles variable.
Check out the JSFIDDLE LINK for the full example.
Any suggestions on how I can make sure the value reflects accurately in the UI?