angularjs file upload tutorial first of all setup the project structure upload the file and display a preview of the image and call the upload service.
angularjs file upload tutorial
AngularJS File Upload Example & Tutorial for This example uses a Web API controller to upload files. I will be discussing the approach of uploading files using ngResource with AngularJS.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Angularjs Image Uploading - www.pakainfo.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
</head>
<body ng-app="pakainfo_v1" ng-controller="ProductCtrl">
<!-- Form Start -->
<form ng-submit="submit()" name="form" role="form">
<input ng-model="form.image" type="file" class="form-control input-lg" accept="image/*" onchange="angular.element(this).scope().mediaStore(this)" style="width:399px" >
<input type="submit" id="submit" value="Submit" />
<br/>
<img ng-src="{{final_img_path}}" style="width:300px;">
</form>
<!-- Form End -->
<script type="text/javascript">
var app = angular.module('pakainfo_v1',[]);
app.controller('ProductCtrl', function($scope, $http) {
$scope.form = [];
$scope.files = [];
$scope.submit = function() {
$scope.form.image = $scope.files[0];
$http({
method : 'POST',
url : '/do_action.php',
processData: false,
transformRequest: function (data) {
var frmFiles = new FormData();
frmFiles.append("image", $scope.form.image);
return frmFiles;
},
data : $scope.form,
headers: {
'Content-Type': undefined
}
}).success(function(data){
console.log(data);
});
};
$scope.mediaStore = function(element) {
$scope.currentFile = element.files[0];
var flrd = new FileReader();
flrd.onload = function(event) {
$scope.final_img_path = event.target.result
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
flrd.readAsDataURL(element.files[0]);
}
});
</script>
</body>
</html>
PHP Code
images(images is a directory, it should on root path)
do_action.php
<?php
if(!empty($_FILES['image'])){
$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
$final_img = time().'.'.$ext;
move_uploaded_file($_FILES["image"]["tmp_name"], 'images/'.$final_img);
echo "Great , Your File or Image uploaded successfully as ".$final_img;
}else{
echo "Please Try Again!!, Image Is Empty";
}
?>
Don’t Miss : File Upload And Sending Data To Backend Using Angular Js
I hope you get an idea about angularjs file upload tutorial.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.