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

-- 
You received this message because you are subscribed to the Google Groups 
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to