Загрузите два файла отдельно, используя 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;
}
})
}
}
});