Menu
How can I get file content while I click on submit button. I'm getting only first and second input. Please refer to snippet:
!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<input type="file" ng-model="user.file">
<br><br>
<button ng-click="reset()">Submit</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.reset = function(){
console.log($scope.user)
}
});
</script>
</body>
</html>
454
You can't access the file content directly by using ng-scopes but you are able to read the file content with native JavaScript FileAPI. Here is a working fiddle. I think you want to display the file content without uploading them on server side. It's not 100% clear what you want so thats how you can get the filecontent, filesize and filename in browser without uploading.
<div ng-controller="MyCtrl">
<input type="file" id="myFileInput" />
<br /><br />
<button ng-click="submit()">
Submit
</button>
<br /><br />
<br /><br />
<h1>
Filename: {{ fileName }}
</h1>
<h2>
File size: {{ fileSize }} Bytes
</h2>
<h2>
File Content: {{ fileContent }}
</h2>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.fileContent = '';
$scope.fileSize = 0;
$scope.fileName = '';
$scope.submit = function () {
var file = document.getElementById("myFileInput").files[0];
if (file) {
var aReader = new FileReader();
aReader.readAsText(file, "UTF-8");
aReader.onload = function (evt) {
$scope.fileContent = aReader.result;
$scope.fileName = document.getElementById("myFileInput").files[0].name;
$scope.fileSize = document.getElementById("myFileInput").files[0].size;;
}
aReader.onerror = function (evt) {
$scope.fileContent = "error";
}
}
}
});
I have used a directive to handle file in forms (as suggested by joakimbl in the answer here):
app.directive('validFile',[function() {
return {
require : 'ngModel',
scope : {format: '@', upload : '&upload'},
link : function(scope, el, attrs, ngModel) {
// change event is fired when file is selected
el.bind('change', function(event) {
console.log(event.target.files[0]);
scope.upload({file:event.target.files[0]});
scope.$apply(function() {
ngModel.$setViewValue(el.val());
ngModel.$render();
});
})
}
}
}]);
in your HTML
<input type="file" valid-file upload="uploadFile(file)" ng-model="file">
Here uploadFile will be a function in your controller where you can get contetnts of file
Controller code
$scope.uploadFile = function(element) {
$scope.user.file = element;
console.log($scope.user);
}
please have a look at this plunker
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
