how to upload image on server using ajax in cordova build

Question

Can anybody provide the complete ajax and (php or asp) server side code to upload the image directly from simple html to online server. Actually I'm trying to upload image on server using phonegap cli

<form id="uploadaadhar" action="http://server_url" method="post">
    <input type="hidden" name="userid" >
    <br><label>Aadhar Number</label>
    <br><input type="number" name="aadhar" class="form-control" placeholder="XXXX XXXX XXXX">
    <br><label>Choose File</label>
    <br><input name="files[]" class="form-control" type="file" />
    <br><label>PAN Number</label>
    <br><input type="number" name="pan" class="form-control" placeholder="XXXX XXXX XXXX">
    <br><span class="ak-text-indigo">Leave Pan Card Field Blank if you do not want to update your pan card</span>
    <br><br>
    <input type="submit" value="Upload" class="ak-btn ak-blue">
</form>

<script>
    $("[type='hidden']").val(localStorage.getItem("userid")); 
    $("#uploadaadhar").ajaxForm(function(data){

        if(data !== ""){

            $("[type='submit']").val(data);
        }

    });
</script>

Possible duplicate of [Ajax Upload image](https://stackoverflow.com/questions/19447435/ajax-upload-image) — Rahul, Nov 07 '17 at 05:06
Possible duplicate of [Image upload ajax jquery](https://stackoverflow.com/questions/34236501/image-upload-ajax-jquery) — Vivek, Nov 07 '17 at 05:35
I did'nt find the appropirate solution . Some told me to use dataurl but no one provide the correct code to use dataurl. and also its on android platform — Abhishek kumar Sharma, Nov 07 '17 at 05:37

score 1 · Answer 1 · answered Nov 07 '17 at 05:49

1

Here is a sample demo for uploading image. Here data is image and other data that you want to send using post. url is where you want to post data.

 <html>
   <form>
     <input id="file-input" type="file" name="files" accept="image/*" />
     <button type="button" onclick="uploadImage()">upload</button>
   </form>
 </html>

and ajax function

function uploadImage(){
 url = "your web url where u want to upload image";
 var formdata = new FormData();  
 formdata.append( 'files', $('#file-input')[0].files[0]);
 $.ajax({
   type: "POST",
   url: url,
   data: formdata,
   processData: false,
   contentType: false,
   type: 'POST',
   success: function(msg){
       // on success
   },
   error: function(){
       alert("failure");
   },
   async: false
 });
}

answered Nov 07 '17 at 05:49

Vivek

449
18
36

It is same as posting the form using ajax to server. I had tried it .does'nt work on phonegap or I say android – Abhishek kumar Sharma Nov 07 '17 at 05:51
no error everything works fine but on server - file size is 0 bit – Abhishek kumar Sharma Nov 07 '17 at 06:05
Posting image through android will not be same as on webserver . I need to send the image in encrypted form like dataurl does. I better know how to decrypt the data from dataurl on server side but how could i send it in encrypted form from client side ? – Abhishek kumar Sharma Nov 07 '17 at 06:08
1

On android which api-library you are using to communicate with server. like `volley` or other ? – Vivek Nov 07 '17 at 06:12
i think ajax is enough to communicate with server. wait I'll post the codes too – Abhishek kumar Sharma Nov 07 '17 at 06:15
1

Did you refer this https://stackoverflow.com/questions/17445840/want-to-upload-a-pic-to-the-server-using-phonegap-in-android – Vivek Nov 07 '17 at 06:18
i know there is a plugin available but I'm developing my own codes.Thats why im using javascript + ajax to perform queries – Abhishek kumar Sharma Nov 07 '17 at 06:21
try var_dump($_REQUEST); on server and check what values you are getting on server – Vivek Nov 07 '17 at 06:28

score 1 · Answer 2 · edited Nov 07 '17 at 06:35

    <form id="uploadaadhar" action= "http://app.365valueservices.com/365APP/settings.php" method="post">
       <label>Aadhar Number</label>
          <input type="number" name="aadhar" class="form-control" placeholder="XXXX XXXX XXXX">`enter code here`
       <label>Choose File</label>
          <input name="files[]" class="form-control" type="file" />
          <input type="submit" value="Upload" class="ak-btn ak-blue">
   </form>

Javascript

  <script> $("#uploadaadhar").ajaxForm(function(data){
    if(data !== ""){
      $("[type='submit']").val(data);
   } });
  </script>

score 0 · Answer 3 · answered Nov 07 '17 at 06:31

if(isset($_FILES['files']))
{
    if(is_array($_FILES))   
    {  
        foreach ($_FILES['files']['name'] as $name => $value)  
        {  
            $file_name = explode(".", $_FILES['files']['name'][$name]);  
            $allowed_ext = array("jpg","JPG", "jpeg", "JPEG", "png", "PNG", "gif","pdf","docx","doc");  
            if(in_array($file_name[1], $allowed_ext))  
            {  
                $new_name = md5(rand()) . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name];  
                $targetPath = "../httpdocs/docs/".$new_name;  
                //$targetPath = "upload/".$new_name;  

                move_uploaded_file($sourcePath, $targetPath);

                $filepath = "../docs/".$new_name;
                $sql = "update usertbl set aadhar = '".$_POST['aadhar']."' where userid = ".$_POST['userid'];
                sqlsrv_query($conn,$sql);
                if($_POST['pan'] != ""){
                    $sql2 = "update usertbl set panno = '".$_POST['pan']."' where userid = ".$_POST['userid'];
                    sqlsrv_query($conn,$sql2);
                }

                $stmt  = sqlsrv_query($conn,"select * from user_meta where userid = ".$_POST['userid']." and metakey = 'aadharpath'");
                $row_count = sqlsrv_has_rows($stmt);
                if($row_count === false){
                    sqlsrv_query($conn,"insert into user_meta(userid,metakey,metavalue,Active) values (".$_POST['userid'].",'aadharpath','".$filepath."',1)");

                }
                else
                {
                    sqlsrv_query($conn,"update user_meta set metavalue = '".$filepath."' where metakey='aadharpath' and userid=".$_POST['userid']);
                }

                sqlsrv_query($conn,"insert into useractivity values(".$_POST['userid'].",'You had updated your aadhar details','" .date("d-m-Y H:i:s"). "',1)");

                echo "Updated Successfully";

            }            
        }  



    } 
}

try to debug it. see the response before isset($_FILES) `var_dump($_REQUEST);` and `var_dump($_FILES);` — Vivek, Nov 07 '17 at 06:35

how to upload image on server using ajax in cordova build

3 Answers3

Linked