CODEWITHSUNDEEP
apicordovauploadcameraphoto
gvjonjones
gvjonjones

Reputation: 90

Phonegap: Photo not uploading

I'm trying to create a very basic photo upload feature. I've followed a lot of tutorials and examples online but I'm having some issues in actually getting it to work.

Currently I receive the following errors:

2012-03-26 17:37:02.107 Upload[84710:13403] fileData length: 72154
2012-03-26 17:37:02.119 Upload[84710:13403] File Transfer Error: unsupported URL
2012-03-26 17:37:02.121 Upload[84710:13403] [INFO] Error in error callback: org.apache.cordova.filetransfer1 = ReferenceError: Left side of assignment is not a reference.

This is my Phonegap HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>File Transfer Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script type="text/javascript" charset="utf-8">

        // Wait for PhoneGap to load
        document.addEventListener("deviceready", onDeviceReady, false);

        // PhoneGap is ready
        function onDeviceReady() {
  // Do cool things here...
        }

        function getImage() {
            // Retrieve image file location from specified source
            navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
            );

        }

        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";

            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";

            options.params = params;
            options.chunkedMode = false;

            var ft = new FileTransfer();
            ft.upload(imageURI, "hosting.domain.co.uk/ios/upload.php", win, fail, options);
        }

        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);
        }

        </script>
</head>
<body>
    <button onclick="getImage();">Upload a Photo</button>
</body>
</html>

And this is my upload.php file:

<?php
print_r($_FILES);
$new_image_name = "namethisimage.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "/var/www/vhosts/domain.co.uk/subdomains/hosting/httpdocs/ios/uploads".$new_image_name);
?>

Is there anything obvious that I'm doing wrong?

Thanks a lot

Jon

Upvotes: 1

Views: 3062

Answers (1)

redDragonzz
redDragonzz

Reputation: 1571

You are using fileURI to upload the photo that is why you are getting the unsupported file format error. This is because the fileURI will be something of the format file://localhost/xx1.jpg. This will be unsupported by the uploader function on the server side.

Javascript can't access the native file system

Javascript does not have direct access to the underlying file system therefore it cannot upload via file transfer in case of phonegap.

The Solution

Your best bet is to instead upload the base64 encoded string for the image. You can obtain the base64 encoded image by using the option navigator.camera.DestinationType.DATA_URL for destinationType. This will return the base64 encoded string. And this can be easily sent over json to the server with the associated metadata like jpg or png format and filename etc.

Take a look here of a successful use of phonegap and an online image hosting facility provided by imgur.

Good Luck and Cheers

Upvotes: 4

Related Questions