I need assistance with dynamically adding the information entered in a form to a table.
Below is the HTML form:
<section id="contact-info">
<section id="contact-page">
<div class="container">
<div class="center">
<p class="lead">Import reports</p>
</div>
<div class="row contact-wrap">
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label>name *</label>
<input type="text" name="NameOfUploader" class="form-control" required="required" ng-model="r.NameOfUploader">
</div>
<div class="form-group">
<label>DateOfUploade</label>
<input type="Date" class="form-control" ng-model="r.DateOfUpload" >
</div>
<div class="form-group">
<label for="t">Type of File</label>
<select
class="form-control" id="t" ng-model="r.TypeOfFile">
<option>.word</option>
<option>.xsl</option>
<option>.pdf</option>
</select>
</div>
<div class="form-group">
<label>file</label>
<input type="file" name="file" class="form-control" fileread="r.file">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg" ng-click="saveDetails()">Import File</button>
</div>
<table class="table">
<tr>
<th>Id_file</th>
<th>NameOfUploader</th>
<th>DateOfUpload</th>
<th>TypeOfFile</th>
<th>File</th>
</tr>
<tr ng-repeat="r in reports">
<td></td>
<td>{{r.NameOfUploader}}</td>
<td>{{r.DateOfUpload}}</td>
<td>{{r.TypeOfFile}}</td>
<td>{{r.file}}</td>
</tr>
</table>
</div>
</form>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#contact-page-->
Here's my Java controller code:
@RequestMapping(value="/saveDetails")
public DetailsReport saveDetails(DetailsReport d)
{
detailsReportRepository.save(d);
System.out.println(d.toString());
return d;
}
And here's the JavaScript controller code:
//Save details of report
$scope.saveDetails=function(){
var fd = new FormData();
var url='http://localhost:8080/saveDetails';
fd.append("NameOfUploader",$scope.r.NameOfUploader);
fd.append("DateOfUpload",$scope.r.DateOfUpload);
fd.append("TypeOfFile",$scope.r.TypeOfFile);
fd.append("file", $scope.r.file);
console.log(fd);
$http.get(url,fd,{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
$scope.reports.push(data);
console.log(data);
console.log($scope.reports);
})
.error(function(){
});
}
If anyone can help, I am facing an issue where the imported data is not being added to the table when clicking on "Import File". There are no errors reported.