0

I'm using Eclipse with PhoneGap to develop an app. For the run config, I'm using Android Device because it is faster compared to using AVD.

So, what I wanna do is to upload a file from the phone (USB connected to eclipse via laptop) to my localhost server. Mainly speaking, to upload a file to a remote server. But as for the initial part, I just want to upload it to the localhost.

(index.html) Here is my upload script from HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    document.addEventListener("deviceready",onDeviceReady,false);

    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');

      smallImage.style.display = 'block';

      smallImage.src = "data:image/jpeg;base64," + imageData;

      var options = new FileUploadOptions();
      options.fileKey="file";
      options.fileName=imageData.substr(imageData.lastIndexOf('/')+1);      
      options.mimeType="image/jpeg";
      console.log("Filename: " + options.fileName);
      var params = new Object();
      params.value1 = "test";
      params.value2 = "param";
      options.params = params;
      options.chunkedMode = false;
      var ft = new FileTransfer();
      ft.upload(imageData, "http://127.0.0.1:80/upload_file.php", win, fail, options);
    }

    function capturePhoto() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail,
        { 
          quality: 50,
          sourceType : Camera.PictureSourceType.CAMERA,
          destinationType: destinationType.DATA_URL
        }
      );
    }

    function win(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
      alert(r.response);
    }

    function fail(error) {
      alert("An error has occurred: Code = " = error.code);
    }

    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <img style="display:none;width:300px" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />

  </body>
</html>

And yes, what the code does is it captures a photo with camera and that photo will be uploaded to the server. But my main thing to be focused here is to upload it.

(c:/wamp/www/upload.php) Here is the php script for the server-side:

 <?php
if ($_FILES["file"]["error"] > 0) {
  echo "Return Code: " . $_FILES["file"]["error"] . "";
} else {
  echo "Upload: " . $_FILES["file"]["name"] . "";
  echo "Type: " . $_FILES["file"]["type"] . "";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb";
  echo "Temp file: " . $_FILES["file"]["tmp_name"] . "";
  if (file_exists("D:/PHPUPLOAD/" . $_FILES["file"]["name"])) {
    echo $_FILES["file"]["name"] . " already exists. ";
  } else {
    move_uploaded_file($_FILES["file"]["tmp_name"], "C:/PHPUPLOAD/" . $_FILES["file"]["name"]); //Save location
    echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
  }
}
?>

It should be okay right if I'm using Android Device instead of AVD?

emen
  • 6,050
  • 11
  • 57
  • 94

3 Answers3

1

You can use 127.0.0.1 to reach the emulator's host, if you are in the same machine. If you want to reach the development machine, you can use 10.0.2.2.

Refer to How to get the Android Emulator's IP address?

Hope it helps.

Community
  • 1
  • 1
Urb Gim Tam
  • 449
  • 4
  • 10
1

Usb connectivity does not provide network access to the mobile device .

For connecting to localhost see this:

How can I access my localhost from my Android device?

If you wish to run the same code on a remote server then phonegap has the option of Domain White listing.

you can get more info on that here :

http://docs.phonegap.com/en/edge/guide_appdev_whitelist_index.md.html#Domain%20Whitelist%20Guide

Community
  • 1
  • 1
Varun Nath
  • 5,570
  • 3
  • 23
  • 39
1

I've finally found a way to work it out. I forgot to mention that my device and laptop is within the same network (wifi), so in order to make it connect to the laptop's localhost, I need to find its local IP address.

In cmd type ipconfig and find the host's IPv4 address. For example:

Wireless LAN adapter Wireless Network Connection:

   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : fe80::f0b2:6e7f:53fb:24e8%13
   IPv4 Address. . . . . . . . . . . : 192.168.1.3
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : 192.168.1.1

In my case, it is 192.168.1.3.

To make it visible, you need to allow Apache server to accept all incoming requests. To do so, open up Apache's httpd.conf file and modify the following:

<Directory "c:/wamp/www">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order Deny,Allow
    Allow from all
</Directory>

Test the IP address in your phone. You should see WAMP homepage.

Use this line in index.html to connect to your localhost

ft.upload(imageData, "http://192.168.1.3/upload_file.php", win, fail, options);

And for the upload_file.php:

<?php
    print_r($_FILES);
    $new_image_name = "namethisimage.jpg";
    move_uploaded_file($_FILES["file"]["tmp_name"], $new_image_name);

    echo "<img width='500px' src='namethisimage.jpg'>";
?>

Thank you guys for the response :)

emen
  • 6,050
  • 11
  • 57
  • 94