How to upload file in php using angular js

Question

Now I am learning angular js with php. I will try to upload files and stored file name in mysql database

task.html

<!DOCTYPE html>
<html>
<script src="js/shared/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="file-upload">
        <input type="text" ng-model="name">
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

in this the upload button cannot process anything.

app.js

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]);
            });
        });
    }
   };
}]);
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("Success");
         });
     }
 }]);
 myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

   $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "save_form.php";
        var text = $scope.name;
        fileUpload.uploadFileToUrl(file, uploadUrl, text);
   };
}]);

In this app.js will executed but it does not go to save_form.php

save_form.php

<?php
     include_once "db.php";
     $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 
     // 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();
?>

but in this upload button cannot process anything

Please give details of what you tried till now. Post your code which didnt work. if you want to learn Angular JS then there are severtal other sites. If you face problem in coding then give details of the procedure you followed. — Amit Ray, May 14 '16 at 07:22
http://stackoverflow.com/questions/33534497/file-upload-using-angularjs-with-php-server-script i am used this link programs.but its upload button cannot work — Nandhakumar, May 14 '16 at 07:40
Can you add your codes here? part of codes for uploading only. As the procedure listed in that link is supposed to work. — Amit Ray, May 14 '16 at 07:48

Amit Ray · Accepted Answer · 2016-05-14T09:58:06.367

I tested the same code and it works perfectly. This is my index.php file inside angularjs folder

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="file-upload">
        <input type="text" ng-model="name" placeholder="Enter Name here">
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
    <div id="result"></div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

My App.js file

//app.js code
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]);
            });
        });
    }
   };
}]);
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("Success");
         });
     }
 }]);
 myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

   $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);

        var uploadUrl = "upload.php";
        var text = $scope.name;
        fileUpload.uploadFileToUrl(file, uploadUrl, text);
   };
}]);

My Upload.php Script

<?php
 //include_once "db.php";
 $target_dir = "upload/";
 $name = $_POST['name'];

 print_r($_FILES);
 $target_file = $target_dir . basename($_FILES["file"]["name"]);
 if(!isset($name) || $name=="undefined"){
    $name = $_FILES["file"]["name"];     
 }
 move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);
 //write code for saving to database 
 // Create connection
 $conn = new mysqli('YOUR_SERVER', 'YOUR_USER_ID', 'YOUR_USER_PASSWORD', 'YOUR_DB_NAME');
 // 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();

?>

My SQL file

CREATE TABLE IF NOT EXISTS `mydata` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `filename` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

This is the download link for the entire folder http://www.filehosting.org/file/details/569439/angularjs.zip

How to upload file in php using angular js

task.html

app.js

save_form.php

1 Answers1