Как добавить элемент управления во входной файл с помощью angularjs?

Question

Я хочу потребовать ввода файла типа с использованием angularjs без использования атрибута required в коде HTML. Мой интерфейс: enter image description here

Я хочу получить оповещение после нажатия кнопки submit.

Это то, что я сделал: enter image description here

function DatabaseCtrl($scope, $http, predefineds, locationSearch, queries, database, $window) { 
var credentials = { 
fileName: "" 
}; 
$scope.credentials = credentials; 
$scope.uploadToFolder = function() { 
    if($scope.credentials.fileName.length<1) { 
     $window.alert("Please select a file!"); 
     return false; 
    } 
    database.uploadToFolder($scope.credentials.fileName, true); 
}; 

HTML-код:

 <form role="form" name="frmUploadFolder" ng-submit="uploadToFolder()"> 
    <div class="box"> 
     <h2> 
      <span ng-show="isUserFile">File directory browser :</span> 
      <button type="button" ng-show="isUserFile" class="btn btn-default">See file(s)</button> 
      <button type="button" ng-show="!isUserFile" class="btn btn-default">Upload file(s)</button> 
     </h2> 
     <div class="content"> 
      <p> 
       <label ng-show="isUserFile" >Please specify a file, or a set of files:</label><br> 
       <input type="file" ng-show="isUserFile" name="datafile" id="fileName" ng-model="credentials.fileName" size="20" required multiple> 
       <button type="submit" ng-show="isUserFile" class="btn btn-default" >Upload</button><br> 
      </p> 

     <div ui-if="!tree.length" class="message"> 
      <p ui-if="!tree.loading"> 
       <span ng-show="!isUserFile">Empty directory</span> 
      </p> 
     </div> 
     </div> 
    </div> 
</form> 

Обслуживающие ЯШ:

angular.module('referl.services').factory('database', function($http, channel, $rootScope) { 
var database = { 
    uploadToFolder: function(fileName, navigateOnSuccess) { 
     var parameters = { 
      fileName: fileName 

     }; 
     $http.get("api/database/uploadToFolder", {params: parameters}) 
      .success(function(response) { 
       if(response.error) { 
        alert(response.error); 
       } else { 
        if (navigateOnSuccess) { 
         alert("Navigation On Success !"); 
        } 
       } 
      }); 

    } 

}; 

Любая помощь, пожалуйста?

Answer 1

Почему-то угловой не полностью поддерживает привязку элемента модели к вводу файла. Директивный подход обычно является общепринятой работой, но внутри вашего контроллера вы также можете использовать document.getElementById («имя файла»), чтобы получить ссылку на ввод имени файла и получить его значение.