Hello friends in this post we are going to learn how to upload file by using AngularJS with PHP programming script. This my tutorial on AngularJS in we will learn File Upload By using AngularJS with PHP without page refresh. In this We will upload image and store into folder, we have also store image name into database table and fetch image data from database and display on web page by using AngularJS. If you are looking for tutorial on AngularJS for Upload image on to server by using PHP Code. If you have work on any web project which build on AngularJS with back end as PHP and in that project you want to add feature for upload image then you can follow this tutorial for upload image by using Angular Javascript with PHP as server side. When we have select image, it will successfully upload image to the server and it is also display on web page. So this is my tutorial on how to upload file using angular javascript code with php script. In this tutorial we have learn how to make custom angular javascript directive for upload file to the server and in this directive we have store select file data and have make file upload function and we have use that selected file data into file upload function and appended into form data object and that form data object data send to the server by using http post method and we have write php code for upload file to the server and when file uploaded to the server then file name also inserted into data table. Then after we have make select function for fetching images data from the data table and show images on we page. This all things we have discuss into this video which we have attached with this post.
Source Code
Database
--
-- Table structure for table `tbl_images`
--
CREATE TABLE IF NOT EXISTS `tbl_images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_images`
--
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | File Upload Using AngularJS with PHP script</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<br />
<h3 align="center">File Upload Using AngularJS with PHP Script</h3><br />
<br />
<div class="container" ng-app="myapp" ng-controller="myController" ng-init="select()">
<div class="col-md-4">
<input type="file" file-input="files" />
</div>
<div class="col-md-6">
<button class="btn btn-info" ng-click="uploadFile()">Upload</button>
</div>
<div style="clear:both"></div>
<br /><br />
<div class="col-md-3" ng-repeat="image in images">
<img ng-src="upload/{{image.name}}" width="200" height="200" style="padding:16px; border:1px solid #f1f1f1; margin:16px;" />
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
//console.log(files[0].name);
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
app.controller("myController", function($scope, $http){
$scope.uploadFile = function(){
var form_data = new FormData();
angular.forEach($scope.files, function(file){
form_data.append('file', file);
});
$http.post('upload.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).success(function(response){
alert(response);
$scope.select();
});
}
$scope.select = function(){
$http.get("select.php")
.success(function(data){
$scope.images = data;
});
}
});
</script>
upload.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(!empty($_FILES))
{
$path = 'upload/' . $_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'], $path))
{
$insertQuery = "INSERT INTO tbl_images(name) VALUES ('".$_FILES['file']['name']."')";
if(mysqli_query($connect, $insertQuery))
{
echo 'File Uploaded';
}
else
{
echo 'File Uploaded But not Saved';
}
}
}
else
{
echo 'Some Error';
}
?>
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
$query = "SELECT * FROM tbl_images ORDER BY id DESC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
thank you
ReplyDeleteit worked. thankyou :)
ReplyDeleteI really appreciate the information shared above. It’s of great help. MaxMunus provides Remote Support For Corporate and for Individuals. If anyone is facing any issue in his project of # ANGULAR JS we can support them remotely , kindly contact us http://www.maxmunus.com/contact
ReplyDeleteMaxMunus Offer World Class Industry best Consultant on# ANGULAR JS. We provide end to end Remote Support on Projects. MaxMunus is successfully doing remote support for countries like India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain, and UAE etc.
Saurabh
MaxMunus
E-mail: saurabh@maxmunus.com
Skype id: saurabhmaxmunus
Ph:(0) 8553576305/ 080 - 41103383
http://www.maxmunus.com
this is not working
ReplyDeleteWrite $output = array(); in the 3rd line of select.php
ReplyDeletethanku so much :)
DeleteThat's still as it is.
Deleteits not working
ReplyDeletethis is not working
ReplyDeleteObject doesn't support property or method 'assign'
ReplyDeleteview part is not happening
ReplyDelete