I need one help.I need to store image in my local folder using Angular.js and PHP.I am explaining my code below.
<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form name="form">
<label for="bannerimage" accesskey="B">
<span class="required">*</span> Banner Image
</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" multiple>
<label for="bannerimage" accesskey="B" >
<span class="required">*</span> View Image
</label>
<div style="padding-bottom:10px;" ng-repeat="step in stepsModel">
<img ng-src="{{step}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div>
<input type="button" id="btn" ng-click="submitImage();" value="Upload" />
</div>
<div class="clear"></div>
</form>
</div>
The controller file is given below.
var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
$scope.submitImage=function(){
console.log('image',$scope.file);
}
$scope.stepsModel = [];
$scope.uploadFile = function(event){
console.log('event',event.target.files);
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(file);
}
};
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
});
app.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.bind('change', onChangeHandler);
}
};
});
Here my requirement is when user will click on upload button the validation will check and image will save inside the project folder.I am using Angular.js and PHP. Please help me to do this.