In this post we are going to see how to upload the file to a endpoint and also for upload the same file twice.
Normally what will happen if we upload the same file twice, it wont reflect the changes in the file input control, for that to reflect we have to reset the value to null of that element
Create a View:
we are creating a view which consists of one file upload control, and we are referring the two scripts one is angular js, another one is app.js
we are creating a angular module
Create a Controller:
we are creating a controller which consists of following dependencies one is $scope and another one is httpService. we are calling a submit function whenever file is selected. if the upload is success or failure we are resetting the input file value to null. i.e resetting the value
app.controller('mainController', ['$scope','httpService',function($scope, httpService){
$scope.title = 'Sample File upload';
$scope.submit = function(){
httpService.uploadFile($scope.file).then(function(data){
/* This event will reset the file, so same file can be upload again */
$scope.$broadcast('resetfile');
},function (error) {
$scope.$broadcast('resetfile');
});
};
$scope.$watch('file', function (newFile, oldFile) {
if(newFile!=undefined) {
$scope.submit();
console.log('file changed',newFile);
}
});
}]);
Create a Directive:
we are creating a directive which will set the modal value, whenever there is a change in the fileupload control, i.e whenever you select a file, we will parse the attrs.fileModel and assign the value to that model on change.
Create a Service:
Output:
*********
If you see the above console, logging of same file twice in upload is reflected by code
From this post we can learn how to upload a file in Angular js and also for upload the same file twice
Normally what will happen if we upload the same file twice, it wont reflect the changes in the file input control, for that to reflect we have to reset the value to null of that element
Create a View:
we are creating a view which consists of one file upload control, and we are referring the two scripts one is angular js, another one is app.js
<!DOCTYPE html> <html> <head> <title>File upload</title> <script src="./angular.js"></script> <script src="app.js"></script> </head> <body > <div ng-app="myApp"> <div ng-controller="mainController"> Browse File <input file-model="file" type="file"> </div> </div> </body> </html>
we are creating a angular module
var app = angular.module('myApp', []);
Create a Controller:
we are creating a controller which consists of following dependencies one is $scope and another one is httpService. we are calling a submit function whenever file is selected. if the upload is success or failure we are resetting the input file value to null. i.e resetting the value
app.controller('mainController', ['$scope','httpService',function($scope, httpService){
$scope.title = 'Sample File upload';
$scope.submit = function(){
httpService.uploadFile($scope.file).then(function(data){
/* This event will reset the file, so same file can be upload again */
$scope.$broadcast('resetfile');
},function (error) {
$scope.$broadcast('resetfile');
});
};
$scope.$watch('file', function (newFile, oldFile) {
if(newFile!=undefined) {
$scope.submit();
console.log('file changed',newFile);
}
});
}]);
Create a Directive:
we are creating a directive which will set the modal value, whenever there is a change in the fileupload control, i.e whenever you select a file, we will parse the attrs.fileModel and assign the value to that model on change.
app.directive('fileModel',function ($parse) { return { restrict:'A', link: function(scope, element, attrs) { var modal = $parse(attrs.fileModel); var modalSetter = modal.assign; element.bind('change',function () { scope.$apply(function () { modalSetter(scope, element[0].files[0]); }) }); scope.$on('resetfile',function (event) { element.val(null); }); } } });
Create a Service:
app.service('httpService',function ($http) { this.uploadFile = function (file) { var fileFormData = new FormData(); fileFormData.append('file', file); return $http.post('https://www.sampleservice.com/upload', fileFormData, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }); } });
Output:
*********
If you see the above console, logging of same file twice in upload is reflected by code
From this post we can learn how to upload a file in Angular js and also for upload the same file twice