How to Upload The Image Using AngularJS and PHP

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.

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.

    <div class="file-upload">
        
        
        <button>upload me</button>
    </div>

<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);
   };

}]);

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-&gt;connect_error) {
        die("Connection failed: " . $conn-&gt;connect_error);
     }

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

     if ($conn-&gt;query($sql) === TRUE) {
         echo json_encode($_FILES["file"]); // new file uploaded
     } else {
        echo "Error: " . $sql . "<br />" . $conn-&gt;error;
     }

     $conn-&gt;close();

$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.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to Upload The Image Using AngularJS and PHP