Need help in customizing my AngularJS code for file upload!

11 views
Skip to first unread message

Anshul Ghorawat

unread,
Dec 9, 2016, 1:33:13 PM12/9/16
to Angular, ANSHUL JAIN, anshul....@live.com
I'm pretty new to AngularJS and trying my hands out.

I'm trying to create a file upload functionality using angular JS.

View
-------
   
<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="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!";
           
}
           
       
});


 
Reply all
Reply to author
Forward
0 new messages