Home/ Questions/Q 7670767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:53:55+00:00

Okay I have a small app for uploading an image (using phonegap, Jquery). I

  • 0

Okay I have a small app for uploading an image (using phonegap, Jquery). I have jquery handling upload via AJAX. The image is being sent but I am not sure how to process it correctly at the severside. Any thoughts very welcome! Here’s my code so far:

PHP:

<?php 
    ////////THE PROBLEM AREA I THNK//////////
    if ($_REQUEST['image']) {

            // convert the image data from base64
            $imgData = base64_decode($_REQUEST['image']);

            // set the image paths
            $file = '/uploaded_files/' . md5(date('Ymdgisu')) . '.jpg';
            $url = 'http://creativetree.co/creativetreeAlpha' . $file; 

            // delete the image if it already exists
            if (file_exists($file)) { unlink($file); }

            // write the imgData to the file
            $fp = fopen($file, 'w');
            fwrite($fp, $imgData);
            fclose($fp);
    }

    echo "<h1>Page is online</h1>";
    echo "<p>Nothing special just a first go at phonegap! </p>";
    echo "<h2>Contents of uploaded_files Folder to show iphone upload</h2>";

    $dir = '/homepages/22/d397139588/htdocs/creativetreeAlpha/uploaded_files';

    if ($handle = opendir($dir)) {
        while (false !== ($file = readdir($handle))) { 
            if ($file != "." && $file != "..") { 
                echo "$file\n";
                echo "<br>";
            } 
        }
        closedir($handle); 
    }
   ?>

Basic HTML:

<script>
function onBodyLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
</script>
</head>
<body onload="onBodyLoad()">
<body>
        <h1>Upload an image</h1>

        <div id="upload"    
        <input type="button" class="send-image" value="camera" />
        <input type="button" class="send-image" value="library" />
        <img style="width:60px; height:60px" id="image" src="" />
        </div>

<div id="output"></div>
</body>
</html>

Javascript:

$(document).ready(function(){
  $(document).bind('deviceready', function(){

  function sendImage(src) {

    src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;
    navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});

                             function success(imageData) {
                             var url = 'http://creativetree.co/creativetreeAlpha/mobileImageUpload.php';
                             var params = {image: imageData};

                             // send the data
                             $.post(url, params, function(data) {
                                     alert('sent');
                                     // Display the selected image on send complete
                                     $('#image').attr('src', 'data:image/jpeg;base64,' + params['image']);     
                             });
                             }
}

  function fail(message) { alert(message); }

  $('.send-image').click(function () { sendImage($(this).val()); });

  });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Cut a long story short I needed to set permissions on my online server folders.

    Also worth noting for any new iphone Developers using phonegap and accessing a URL (essential for AJAX obviously). The URL must be set in the Xcode project (PhoneGap.plist contains an array to store external URL’s).

    This maybe obvious to some but seems to be not very well documented even by PhoneGap (or at least I did not see on my frantic google searches). The wiki tutorial I studyed mentioned nothing about this.

    See image for details.

    enter image description here

    • 0