cannot get input value of Struts 2 file selector with Angular

Question

I am using Angular and I want to get access to the file input field's file name attributes and display it in another input box.

This is the file upload field:

<div class="btn btn-orange btn-file col-sm-3" >
     <s:text name="expedientes.btn.seleccionar.fichero" /> 
     <s:file name="form.filesUpload" multiple="multiple" ng-model="filesUploadModel" id="filesUploadId"/>
</div>

And the input box to show file name:

<input type="text" class="form-control"         
      id="fileNameId"               name="fileName"                          
      ng-model="fileNameModel"      ng-disabled="true"                       
      ng-init=""                    ng-bind="fileNameModel = filesUploadModel">

But the ng-bind is not working.

I also tried to define $watch for the file input field like this:

$scope.$watch(function() {
            $scope.files = angular.element(document.querySelector('#filesUploadId'));
            return files;
            },
              function(newValue, oldValue) {
            $("#fileNameId").val(files.files[0].name);
            });

to watch if the <input type="file" id="filesUploadId"> has changed, select this element and return it as files, and let the element with id fileNameId's value equals to files.files[0].name, because the file upload input has an attribute named files with all the files I upload, and their file names files[i].name.

But FF tells me files is undefined and no avail. It's not working.

Am I doing something wrong here? Please help and thanks!!

Edit: I am using this and no error, but no result either:

if (!angular.equals(document.getElementById("filesUploadId"), null)) {
$scope.$watch(function() {
           var myFiles  = document.getElementById("filesUploadId");
            return myFiles;
            },
              function(newValue, oldValue) {
            $( "#fileNameId" ).val(function(){
                var result = null;
                $(myFiles).each(function(){
                    result = name + this.attr(files).attr(name);
                });
                return result;
                    });
               });
      }

score 0 · Accepted Answer · edited May 23 '17 at 12:30

I solved it with pure JavaScript, enlighted by another question here: AngularJs: How to check for changes in file input fields?

Actually, I find it impossible to use onchange() when the function I want to call is wrapped in angular module, except in the way in above answer:

onchange="angular.element(this).scope().setFileName()"

And in my script I only use pure JavaScript, except for the definition of the function:

angular.module('es.redfinanciera.app').controller('PanelMandarCorreoCtrl', function ($scope, $modalInstance) {

....(other functions)

$scope.setFileName = function() {
    var result = "";
       var adjuntos = document.getElementById("filesUploadId").files;
       for (i = 0; i < adjuntos.length; i++){
           result = result + adjuntos[i].name + "\r\n";
           };
    document.getElementById("fileNameId").value = result;
}

}
$scope.btnClean = function() {
    document.getElementById("filesUploadId").value = "";
    document.getElementById("fileNameId").value = "";
};

And in my jsp page, finally I have my file upload button and a clean button like this:

<div class="btn btn-orange btn-file col-sm-3" >
    <s:text name="expedientes.btn.seleccionar.fichero" /> 
    <s:file name="correoForm.filesUpload" id="filesUploadId" multiple="multiple" ng-model="filesUploadModel" 
            onchange="angular.element(this).scope().setFileName()"/>
</div>
<div class="col-sm-2">
    <button class="btn btn-default btn-normal" type="button"     ng-click="btnClean()">
        <s:text name="expedientes.btn.quitar.fichero" />
    </button>
</div>

I have a <textarea> to display all the file names:

<textarea class="form-control"   ng-model="fileNameModel"
          name="fileName"        id="fileNameId"
          ng-disabled="true"></textarea>

EDIT: Clear button is not working in IE8 because it is not permitted in IE8 to set "" value to a file input field. My guess is, I can remove this file input field and copy a new one, with same style but no file is selected. But I have found a good question who has amounts of answers here:

clearing-input-type-file-using-jquery

Also, I heard that in IE8 onchange() event will not be triggered if you only select a file, you must add this.blur() after selecting a file. Regarding this issue, IE is following strictly the spec, but FF is not. But in my case, the event is actually triggered. Maybe because I am testing under IE 11 using Developing Tools' emulator for IE8.

cannot get input value of Struts 2 file selector with Angular

1 Answers1