How do I customize my Angular JS script for file upload?

[Anshul Ghorawat]

I'm pretty new to Angular JS and trying my hands out.
I'm trying to create a image file upload using Angular JS and PHP.  I've so far achieved this.

PS: My whole intention is to learn by trying it myself rather than copying other codes available on the internet. Hence, please help me to modify this code.

View:
--------
    

 <div ng-app="myPhoto">
        <div ng-controller="myControl">
            <div class="photoUpload box">
                <center>
                    <b><i>
                        <?php
                            echo $this->session->flashdata("msg");
                        ?>
                    </i></b>
                </center>
               
                <form id="imageform" enctype="multipart/form-data" method="POST">
                    <table align="left" cellpadding="10">
                        <caption><h2>Create an album!</h2><hr></caption>
                        <div ng-model="user.err"></div>
                        <tr>
                            <th><label for="album">Album:</label></th>
                            <td><input type="text" ng-model="user.album" placeholder="Enter the album name" class="form-control"></td>
                        </tr>
                        <tr>
                            <th><label for="photo">Photo:</label></th>
                            <td><input type="file" ng-model="user.photo" ng-file-select="onFileSelect($files)" multiple class="form-control"></td>
                        </tr>
                        <tr>
                            <th><label for="title">Photo title:</label></th>
                            <td><input type="text" ng-model="user.pictitle" placeholder="Enter the photo title or caption" class="form-control"></td>
                        </tr>
                        <tr>
                            <th><label for="files">Preview file:</label></th>
                            <td>
                                <div ng-model="user.preview" class="previewfile"><img src=""></img></div>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn-primary" ng-click="uploadimg()">Upload</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn-primary">Reset</button>
                            </th>
                        </tr>
                    </table>
                </form>
            </div>            
         </div>
    </div>

           
           
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
AngularJS:
---------------- 

  var obj = angular.module("myPhoto", []);
    obj.controller("myControl", function($scope, $http){
        var formData = new FormData();
       
        formData.append("file", $scope.file);
        $scope.uploadimg = function(){
            $http({
                  method: "POST",
                  url:"home/index",
                  data: $.param({'formData':$scope.user}),
                  headers: {'Content-Type': 'multipart/form-data'}
                  //headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
                 }).success(function (response,status) {
                  if(status==200)
                  {
                    //console.log(response);
                    $scope.message = response;
                    $scope.user.err.html(data).fadeIn();
                    $scope.formData[0].reset();
                  }
                })
                .error(function(response,status){
                   
                });
            }
            else
            {
                $scope.message = "Failed!";
            }
           
        });

Thank you!

Anshul

[karthick bala]

Hi Anshul,

Welcome to Angular!!!

What you are trying to achieve is not possible at all.

File upload can't be done via an AJAX call. This statement is true for vanilla JS itself. so, its obviously it applies for Angular.

You can try some File Upload plugins for Angular. blueimp is a nice plugin for jQuery but there is a angular version too.

Note: Since you are learning, start with something simple instead of File-upload which is pretty advanced concept in Angular.

Happy Learning.

Thanks and Regards
Karthick B      

[Sander Elias]

Hi Ansul,

You are pretty much on the good path! 

You need to set your transformRequest, otherwise angular will mess up your files.

If you don't get it figured out, ping back to me, and I will reveal a bit more. (BTW if you search in this group for "upload file" you will find quite some hints.. ;) )

As you said you want to figure it out yourself, I won't post a complete sample ;)

Regards

Sander

[Sander Elias]

Katrick,

You seem misinformed. Uploading files is not that hard with angular, and also not with xmlHTTPRequest directly. It is very well possible, and usually not worth the addition of another 3rth party (wich is written in JS itself!)

Regards

Sander

[Anshul Ghorawat]

Hi Sander,

Thanks a lot!

I modified the code a bit and tried again. But, it doesn't seem to work still!
What could be wrong here?

View:
--------

<html>
    <head>
        <title>Home</title>
        <script src="js/angular.min.js"></script>
        <script src="/js/jquery.min.js"></script>
        <script src="assets/js/myscript.js"></script>
           
    </head>
    <body>        
        <div ng-app="myPhoto">

        <div ng-controller="myControl">
            <div class="photoUpload box">
                <center>
                    <b><i>

                    {{message}}
                    </i></b>

                </center>
               
                <form id="imageform" enctype="multipart/form-data" method="POST">
                    <table align="left" cellpadding="10">
                        <caption><h2>Create an album!</h2><hr></caption>

                        <div ng-model="file.err"></div>

                        <tr>
                            <th><label for="album">Album:</label></th>

                            <td><input type="text" ng-model="file.album" placeholder="Enter the album name" class="form-control"></td>

                        </tr>
                        <tr>
                            <th><label for="photo">Photo:</label></th>

                            <td><input type="file" ng-model="file.photo" multiple class="form-control"></td>

                        </tr>
                        <tr>
                            <th><label for="title">Photo title:</label></th>

                            <td><input type="text" ng-model="file.pictitle" placeholder="Enter the photo title or caption" class="form-control"></td>

                        </tr>
                        <tr>
                            <th><label for="files">Preview file:</label></th>
                            <td>

                                <div ng-model="file.preview" class="previewfile"><img src=""></img></div>

                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">

                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <button type="button" class="btn-primary" ng-model="file.uploadimg" ng-click="uploadimg()">Upload</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn-primary">Reset</button>

                            </th>
                        </tr>
                    </table>
                </form>
            </div>            
        </div>
    </div>

  </body>
</html>

Script:
---------

var obj = angular.module("myPhoto", []);
    obj.controller("myControl", function($scope, $http){

        $scope.file = {};

        var formData = new FormData();
        formData.append("file", $scope.file);
        $scope.uploadimg = function(){
            $http({
                  method: "POST",

                  url:"index.php",
                  data: $.param({'formData':$scope.formData}),
                  transformRequest:angular.identity,

                  headers: {'Content-Type': 'multipart/form-data'}
                  //headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
                 
                 }).success(function (response,status) {
                  if(status==200)
                  {
                    //console.log(response);
                    $scope.message = response;

                    $scope.file.preview.html(data).fadeIn();
                    $scope.formData[0].reset();
                  }
                }).error(function(response,status){
                    $scope.file.err.html(data).fadeIn();
                });
            }
           
        });

Controller:
---------------

<?php
        $formData = $_POST['formData'];
        $album = $formData['fname'];
        $pictitle = $formData['pictitle'];
        $uploadimg = $formData['uploadimg'];
       
           
            $conn = mysqli_connect("localhost","root","","angularjs");
           
            /* mysql_connect("localhost","root","");
            mysql_select_db("angularjsdb"); */
           
            if(isset($uploadimg)){
                    $image = addslashes(file_get_contents($_FILES['photo']['tmp_name']));
                   
                    echo $query = "Insert into image(ALBUM, PHOTO, TITLE) values('$album','$image', '$pictitle');";
                    $sts = mysqli_query($conn, $query);
                   

                    if($sts == true)
                        echo "Success";
                    else
                        echo "Failure";
            }
           
?>

Regards,
Anshul