Upload Photo from iPhone to PHP Using PhoneGap

php javascript iphone upload cordova

17,100

Solution 1

Use options PHOTOLIBRARY or SAVEDPHOTOALBUM to get existing pictures from your phone. See more at http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera.

Solution 2

The Base64 option is really just for ease of displaying on the webpage. if it's not needed then don't use it.

i'd say your best option is to use FILE_URI instead of DATA_URL for Camera.DestinationType

check out http://docs.phonegap.com/phonegap_camera_camera.md.html for more info

17,100

Author by

frednikgohar

Updated on June 04, 2022

Comments

frednikgohar almost 2 years

I have a simple upload form working in PHP (works in web) and also am able to capture a photo from iPhone using PhoneGap (base64) and displaying it on the device.

But I can't figure out how to upload it to my server with PHP.

Here's the code running in PHP:

INDEX.PHP

<?
//print_r($_POST);

if($_POST["action"] == "Upload Image")
{
unset($imagename);

if(!isset($_FILES) && isset($HTTP_POST_FILES))
$_FILES = $HTTP_POST_FILES;

if(!isset($_FILES['image_file']))
$error["image_file"] = "An image was not found.";


$imagename = basename($_FILES['image_file']['name']);
//echo $imagename;

if(empty($imagename))
$error["imagename"] = "The name of the image was not found.";

if(empty($error))
{
$newimage = "images/" . $imagename;
//echo $newimage;
$result = @move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);
if(empty($result))
$error["result"] = "There was an error moving the uploaded file.";
}

}

include("upload_form.php");

if(is_array($error))
{
while(list($key, $val) = each($error))
{
echo $val;
echo "<br>\n";
}
}

include("list_images.php");

?>

And here are the two includes...

UPLOAD_FORM.PHP

<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">
<p><input type="file" name="image_file" size="20" value="beautiful.jpg"></p>
<p><input type="submit" value="Upload Image" name="action"></p>
</form>

LIST_IMAGES.PHP

<?
$handle = @opendir("images");

if(!empty($handle))
{
while(false !== ($file = readdir($handle)))
{
if(is_file("images/" . $file))
echo '<img src="images/' . $file . '"><br><br>';
}
}

closedir($handle);
?>

Here's the code running on iPhone 4 (iOS 4.2) in PhoneGap

INDEX.HTML (running in WWW directory in PhoneGap)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=yes" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <link type="text/css" rel="stylesheet" href="style.css">



    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />       
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */

    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }

    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }


    function getPicture(sourceType)
    {
        var options = { quality: 10 };
        if (sourceType != undefined) {
            options["sourceType"] = sourceType;

        }
        // if no sourceType specified, the default is CAMERA 
        navigator.camera.getPicture(getPicture_Success, null, options);
    };

    function getPicture_Success(imageData)
    {
            //alert("getpic success");
            document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;


    }   



    </script>
  </head>
  <body onload="onBodyLoad()" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>



            <h1>Camera</h1>

            <img style="width:80px;height:120px" id="test_img" src="" /> 

            <p>

            <!-- for testing, add the buttons below -->

            <button onclick="getPicture()">From Camera</button>

            <p>



            <button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>




  </body>
</html>
</html>

Incidentally, while I can grab a fresh picture from the device camera, I've been completely unable to get images from the Library... if anyone knows how to do that, I'd appreciate feedback there too.

Had anyone been able to upload photos from PhoneGap/iPhone to PHP? Any source code on both sides of this would be GREATLY appreciated.