AngularJS file upload with form data using PHP and MySql

Question

I am creating a form which have lots of fields. My concern is I want to upload 10kb jpg file along with other HTML form data.

As per my search I have not seen any post which is explaining AngulaJS file upload along with other data as well. Please help me to do the same. While creating object in Angular controller, I am not able to get fileUpload path. that is why its showing undefine. Code is as under :-

PS - due to lack of time I used table tag.

HTML Code

<div id="wrapper">
<form>
<table>
    <thead>
        <tr>
            <td>Add Record</td>
            <td style="text-align:right"><a href="#/list" style="color:#000;">Back</a></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td><input type="text" value="" id="name" tabindex="1" placeholder="Enter Name" ng-model="person.name" name="name"  /> </td>
        </tr>
        <tr>
            <td>Extn</td>
            <td><input type="text" value="" id="extn" tabindex="2" placeholder="Enter Extn" ng-model="person.extn" name="extn"   /> </td>
        </tr>
        <tr>
            <td>Designation</td>
            <td><input type="text" value="" id="designation" tabindex="3" placeholder="Enter Designation" ng-model="person.designation" name="designation"   /> </td>
        </tr>
        <tr>
            <td>mobile</td>
            <td><input type="text" value="" id="mobile" tabindex="4" placeholder="Enter Mobile" ng-model="person.mobile" name="mobile"   /> </td>
        </tr>
        <tr>
            <td>email</td>
            <td><input type="text" value="" id="email" tabindex="5" placeholder="Enter Email" ng-model="person.email" name="email"   /> </td>
        </tr>
        <tr>
            <td>upload file</td>
            <td><input  type="file" id="uploadFile" name="uploadFile" tabindex="6" ng-mode="person.fileUpload"   /> </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="Submit" id="submitbtn" tabindex="7" ng-click="save(person)"/> </td>
        </tr>
    </tbody>
</table>
</form>

AngularJS

angular
.module("addressBook",['ngRoute'])
.controller('addController', ['$scope','$location','$rootScope','$http', function(scope,location,rootScope,http){

    scope.save = function (item){
        var personData = {
            'name' : scope.person.name, 
            'extn' : scope.person.extn, 
            'designation' : scope.person.designation, 
            'mobile' : scope.person.mobile, 
            'email' : scope.person.email,
            'fileUpload' : scope.person.fileUpload
        };

        if(typeof rootScope.crew === 'undefined'){
            rootScope.crew = [];
        }
        debugger;
        console.log(personData);
        http.post("server/insert.php",personData).success(function(data, status, headers, config){              
            scope.person = personData;
            //rootScope.crew.push(scope.person);
            location.path("/admin");
        })

    }
}]);

PHP Code

<?php
    include 'conn.php';
    $data = json_decode(file_get_contents("php://input"));

    $name = mysql_real_escape_string($data->name);
    $extn = mysql_real_escape_string($data->extn);
    $designation = mysql_real_escape_string($data->designation);
    $mobile = mysql_real_escape_string($data->mobile);
    $email = mysql_real_escape_string($data->email);


    echo $query = "INSERT INTO employee (`name`,`extn`,`designation`,`mobile`,`email`) VALUES ('$name', '$extn', '$designation', '$mobile' , '$email')";
    mysql_query($query);
    Print "Your information has been successfully added to the database.";  
?>

Its still adding one field i.e, name. When I am using same pattern with other fileds it not working. I tried this pattern thanks — Anand Deep Singh
– Anand Deep Singh, Commented Jun 6, 2017 at 6:58

Suraj Khanra · Accepted Answer · 2017-06-06 07:16:32Z

0

you can use Lightweight Angular directive to upload files with input fields https://github.com/danialfarid/ng-file-upload

answered Jun 6, 2017 at 7:16

Suraj Khanra

7401 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anand Deep Singh Over a year ago

I tried it but facing some challenges and it also have only one field. While adding other HTML element data its creating some issues

Collectives™ on Stack Overflow

AngularJS file upload with form data using PHP and MySql

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related