How to Upload The Image Using AngularJS and PHP

By: Prem Tiwari | Last Updated: July 10, 2017 | In: Angular JS

Hi friends, hope you are doing good. A few days back I got some tutorial request from my website visitors about uploading the image by using the AngularJS, PHP and save it into the MySQL database.

A few days back I have shared the tutorial about how to create a login system using AngularJS, PHP, and MySql. In this tutorial, I will share “How to Upload The Image Using AngularJS and PHP”, so keep your close attention in this post.

How to Upload The Image Using AngularJS and PHP

In this example, you need to create three files and one folder one for AngularJS, one for Server side PHP and one for the front-end. below are all files:

1) index.html
2) app.js
3) image_upload.php
4) upload { folder to upload images }

Create index.html

Create the index.html file and copy paste below code.

<button>upload me</button>

</div>

Create app.js file

Now create the app.js file and add the below snippets.

var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {

return {

restrict: 'A',

link: function(scope, element, attrs) {

var model = $parse(attrs.fileModel);

var modelSetter = model.assign;

element.bind('change', function(){

scope.$apply(function(){

modelSetter(scope, element[0].files[0]);

});

}

};

}]);

// We can write our own fileUpload service to reuse it in the controller

myApp.service('fileUpload', ['$http', function ($http) {

this.uploadFileToUrl = function(file, uploadUrl, name){

var fd = new FormData();

fd.append('file', file);

fd.append('name', name);

$http.post(uploadUrl, fd, {

transformRequest: angular.identity,

headers: {'Content-Type': undefined,'Process-Data': false}

})

.success(function(){

console.log("Success");

})

.error(function(){

console.log("Erro");

});

}

}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

$scope.uploadFile = function(){

var file = $scope.myFile;

console.log('file is ' );

console.dir(file);

var uploadUrl = "image_upload.php";

var text = $scope.name;

fileUpload.uploadFileToUrl(file, uploadUrl, text);

};

}]);

Create Image_upload.php File

Now create an image_uplaod.php file and add below code. Below code will get the image and upload into target directory “upload” and also save the image name into your MySQL database table.

$target_dir = "./upload/";

$name = $_POST['name'];

print_r($_FILES);

$target_file = $target_dir . basename($_FILES["file"]["name"]);

move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);

//write code for saving to database

include_once "config.php";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "INSERT INTO MyData (name,filename) VALUES ('".$name."','".basename($_FILES["file"]["name"])."')";

if ($conn->query($sql) === TRUE) {

echo json_encode($_FILES["file"]); // new file uploaded

} else {

echo "Error: " . $sql . "<br />" . $conn->error;

}

$conn->close();

How to create a simple login page using angular, PHP, and MySql https://t.co/LfOkH7GbgD
— Prem Tiwari (@freewebmentor) June 23, 2017

Over to You

Hope this tutorial helps you. If you have still any issue, then feel free to add your comments in below comment section. I will be happy to help you to answer your questions. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn helpful AngularJS tutorials and one thing more don’t forget to subscribe my blog.

Share this post!

About: Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari

angular image upload, angular photo upload, angular upload image, angularjs image upload, angularjs photo upload, angularjs tutorial, angularjs tutorial for beginners, upload image angularjs, upload image using angularjs, upload image using angularjs and php

How to Upload The Image Using AngularJS and PHP