Загрузите два файла отдельно, используя angularjs и отправьте на сервер

Я хочу загрузить два файла, скажем, исходный и целевой файлы. Мой контроллер должен читать исходный и целевой файл только тогда, когда я нажимаю кнопку загрузки. После загрузки я хочу отобразить первую строку обоих файлов. когда я нажимаю кнопку "Отправить", он должен отправить эти два файла вместе с данными формы в бэкэнд. Ниже приведен код, который я попробовал. для одного файла я могу прочитать его содержимое и отобразить в виде, но для двух файлов я не знаю, как поступить.

Мой HTML файл

<form name="myform">
  <input type="text" ng-model="formData.testscript_name" />
  <input type="text" ng-model="formData.testscript_desc" />                               
  <div class="form-group">
    <label for="file_type">File Type</label>
    <select>
        <option ng-repeat="fileTypeVar in ['.csv','.txt','.pdf']"
                id="file_type">{{fileTypeVar}}
        </option>
    </select>
  </div>                   
  <input type="file" ng-model="formData.source_file" file-comparison-directive />
  <input type="file" ng-model="formData.target_file"  file-comparison-directive />                       
  <button type="submit" ng-click="uploadt()">Upload </button>
  <button type="submit" ng-click="submit()">Submit </button>            
</form>

Контроллер и директива

<script>
birt.controller('fileComparisonCtrl', function ($scope, FileComparisonAPI) {
//var vm = this;
$scope.allSteps = null;
$scope.formData = {
    testscript_name: '',
    testscript_desc: '',
    files: ["txt", "csv", "pdf"],
    source_file: '',
    target_file: ''
};
$scope.upLoadData = function(data){     
    $scope.allSteps = data;             
};
$scope.upload = function () {
    // populate first line of source and target file to display in UI
};
$scope.submit = function () {
    // calling rest api to upload file to back end
};   
});

birt.directive('fileComparisonDirective',function(){
  return {        

    link: function($scope,el){        
      el.bind("change", function(e){          
        $scope.file = (e.srcElement || e.target).files[0];          
        var file = $scope.file;
        var ext = file.name.substring(file.name.lastIndexOf('.') + 1);

        if(ext == 'csv'){
            var reader = new FileReader();

            reader.onload = function(event){

                var lines = this.result.split('\n');
                    $scope.upLoadData(lines);
                    console.log(lines);
            };
            reader.readAsText(file);
        }
        else {
            alert("Please upload tab delimiter file");
            clear(); 
            //above clear() will be called to delete the uploaded file name
            return false;   
        }           
      })          
    }
  } 
});

0 ответов

Другие вопросы по тегам