Ionic Tutorials

Hi friend
upload image file using ionic to server.
This can be done using jquery ajax .
In this on server side i have used JAVA.
Dont forgot to add jquery.min.js

Here is the html code 

<style>
.custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    width:100%;
    color:black;
}
.iconFont1{font-size: 20px;padding-top: 15px;}
.textBlack{color: black;}
</style>
                 <div class="row" >
                   <div class="col col-90 " style="background-color: #d4d4d4;">
                    <label class="custom-file-upload">
                    <input type="file" NAME="FILE_0" id="FILE_0"  onchange="angular.element(this).scope().fileNameChanged(this,'file1')" accept="image/*">
                   &nbsp;&nbsp;Image 1
              </label>
            </div>
            <div class="col col-10  textBlack" style="background-color: #d4d4d4;color:black;">
                <div class="ion-android-upload iconFont1" style="padding-top: 7px;"></div>
            </div>
                </div>
                  <div style="height:10px" class="textBlack">&nbsp;{{file1Name}}</div>
                  <div style="height:10px" class="textBlack">&nbsp;</div>
                <div class="row" >
                   <div class="col col-90 " style="background-color: #d4d4d4;">
                    <label class="custom-file-upload">
                   <input type="file" NAME="FILE_1" id="FILE_1" onchange="angular.element(this).scope().fileNameChanged(this,'file2')" accept="image/*">
                   &nbsp;&nbsp;Image 2
              </label>
            </div>
            <div class="col col-10  textBlack" style="background-color: #d4d4d4;color:black;">
                <div class="ion-android-upload iconFont1" style="padding-top: 7px;"></div>
            </div>
                </div>
                  <div style="height:10px" class="textBlack">&nbsp;{{file2Name}}</div>
                  <div style="height:10px">&nbsp;</div>
                <div class="row">
                  <div class="col col-100">
                     <button class="accountSubmitButton alignCenter"  type="submit" ng-click="uploadDocument()"><b>UPLOAD</b></button>
                  </div>
                </div>

               
    Code to be written in Controller 
 
    $scope.fileNameChanged = function (ele,str) {
            var files = ele.files;
            var ext = files[0].name.match(/\.(.+)$/)[1];
            if(angular.lowercase(ext) ==='jpg' || angular.lowercase(ext) ==='gif' || angular.lowercase(ext) ==='jpeg' || angular.lowercase(ext) ==='png')
            {
              if(angular.equals('file1', str))
                  $scope.file1Name= files[0].name;
                else
                  $scope.file2Name= files[0].name;
                $scope.$apply();
              } 
              else
              {
                $ionicPopup.alert({
                     title: 'File Upload',
                     template: 'Only image files are allowed to upload.'
                   })
              }
           
           
          }
     $scope.uploadDocument=function()
          {

            if(angular.equals($scope.file1Name, ''))
            {
                  $ionicPopup.alert({
                     title: 'Account Opening',
                     template: 'Please select a cheque image.'
                   });
            }
            else if(angular.equals($scope.file2Name, ''))
              {
              $ionicPopup.alert({
                   title: 'Account Opening',
                   template: 'Please select a PAN Card image.'
                 });
              }
            else
             {
              $ionicLoading.show({
                  content: 'Loading',
                  animation: 'fade-in',
                  showBackdrop: true,
                  maxWidth: 200,
                  showDelay: 0
                });
                  var FILE_DATA = $("#FILE_0")[0];
                  var FILE_DATA1 = $("#FILE_1")[0];
                  var url = URL of Server
                  var data = new FormData();
              data.append("FILE_0", FILE_DATA.files[0]);
              data.append("FILE_1", FILE_DATA1.files[0]);
              $.ajax(
              {
                 url: url,
                 type: 'POST',
                 data: data,
                 cache: false,     
                 processData: false, // Don't process the files
                 contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                 success: function(data, textStatus, jqXHR)
                 {
                  $ionicLoading.hide();
                   $ionicPopup.alert({
                               title: 'File Upload',
                             template: 'File uploaded successfully.'
                           });
                 },
                error: function(jqXHR, textStatus, errorThrown)
                {
                  $ionicLoading.hide();
                  $ionicPopup.alert({
                           title: 'File Upload',
                           template: 'File upload failed.'
                         });
                  
                }
              });
             }
             
          }