Question

87

Upload Photo from iPhone to PHP Using PhoneGap

rated 0 times [ 89] [ 2] / answers: 1 / hits: 17385 / 13 Years ago, sun, march 13, 2011, 12:00:00

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.