Name of picture uploaded with file phonegap plugin “image%A3456”

Question

I use a FileTransfert plugin phonegap to upload picture from phone to server. The code work right but the name of picture upload is

image%A4444

But I want to save the picture with the same name does it have on phone to display then.

What shall i modify the code ?

Thanks

Function js:

    function uploadImage() {
    document.getElementById('picture_msg').innerHTML = "";
    // Get URI of picture to upload
    navigator.camera.getPicture(
        //function(uri) {
        function(imageURI) {
            try {
                // Pick image from div
                 var img = document.getElementById('pimage');
                img.style.visibility = "visible";
                img.style.display = "block";
                //var imageURI = uri;
                if (!imageURI || (img.style.display == "none")) {
                    document.getElementById('picture_msg').innerHTML = "Tap on picture to select image from gallery.";
                    return;
                }
                // Verify server has been entered
                server = document.getElementById('server').value;
                console.log("Server "+server);
                if (server) {
                    // Specify transfer options
                    var options = new FileUploadOptions();
                    options.fileKey="file";
                    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png';
                    options.mimeType="image/png";
                    //options.mimeType=mimeType;
                    options.chunkedMode = false;
                    options.headers = {
                         Connection: "close"
                    };

                    // Transfer picture to server
                    var ft = new FileTransfer();
                    ft.upload(imageURI, server, function(r) {
                         window.FilePath.resolveNativePath(imageURI, function(result) {
                        document.getElementById('picture_msg').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
                             /* window.FilePath.resolveNativePath(imageURI, function(result) {
                              document.getElementById('picture_msg').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded."; */
                             // onSuccess code
                              imageURI =  result;
                        img.src = imageURI;
                        img.width = 100;
                        img.height = 100;
                          });            
                        //alert(uri);
                    },
                function(error) {
                        document.getElementById('picture_msg').innerHTML = "Upload failed: Code = "+error.code;
                    }, options);
                }
                else {
                    document.getElementById('picture_msg').innerHTML = "Server Not Found";
                }
            }
            catch(exce) {
                alert(exce);
            }
        },
        function(e) {
            console.log("Error getting picture: " + e);
            document.getElementById('picture_msg').innerHTML = "No Image Found";
        },
        {
            quality: 50,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
        }
    );
}

Upload.php

    <?php
   // Directory where uploaded images are saved
$dirname = "phonegapserver/uploads/"; 
// If uploading file
if ($_FILES) {
    print_r($_FILES);
    mkdir ($dirname, 0777, true); 
    move_uploaded_file($_FILES["file"]["tmp_name"],$dirname."/".$_FILES["file"]["name"]);
}
// If retrieving an image
else if (isset($_GET['image'])) {
    $file = $dirname."/".$_GET['image'];
    // Specify as jpeg
    header('Content-type: image/png');

    // Resize image for mobile
    list($width, $height) = getimagesize($file); 
    $newWidth = 120.0; 
    $size = $newWidth / $width;
    $newHeight = $height * $size; 
    $resizedImage = imagecreatetruecolor($newWidth, $newHeight); 
    $image = imagecreatefromjpeg($file); 
    imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height); 
    imagejpeg($resizedImage, null, 80); 
}
// If displaying images
else {
    $baseURI = "http://".$_SERVER['localhost'].':'.$_SERVER['8080'].$_SERVER['REQUEST_URI'];
    $images = scandir($dirname);
    $ignore = Array(".", "..");
    if ($images) {
        foreach($images as $curimg){ 
            if (!in_array($curimg, $ignore)) {
                echo "Image: ".$curimg."<br>";
                echo "<img src='".$baseURI."?image=".$curimg."&rnd=".uniqid()."'><br>"; 
            }
        }
    }
    else {
        echo "No images on server";
    }
}


?>

Answer 1

Filename setting in options object seems to be the issue. Setting proper filename resolves the issue.

Answer 2

Here the code that work:

    function uploadImage() {
    document.getElementById('picture_msg').innerHTML = "";
    // Get URI of picture to upload
    navigator.camera.getPicture(
       // function(uri) {
        function(imageURI) {
             window.FilePath.resolveNativePath(imageURI, function(result) {
            try {
                // Pick image from div
                 var img = document.getElementById('pimage');

                img.style.visibility = "visible";
                img.style.display = "block";
                var imageURI=result;
                //imageURI = document.getElementById('pimage').getAttribute("src");
                if (!imageURI || (img.style.display == "none")) {
                    document.getElementById('picture_msg').innerHTML = "Tap on picture to select image from gallery.";
                    return;
                }

                // Verify server has been entered
                server = document.getElementById('server').value;

                console.log("Server "+server);
                if (server) {
                    // Specify transfer options
                    var options = new FileUploadOptions();
                    options.fileKey="file";
                                        alert(imageURI);
                   options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
                   //alert(imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png');
                    options.mimeType="image/jpeg";


                    //options.mimeType=mimeType;
                    options.chunkedMode = false;
                    options.headers = {
                         Connection: "close"
                    };

                    // Transfer picture to server
                    var ft = new FileTransfer();
                    ft.upload(imageURI,server, function(r) {

                         //window.FilePath.resolveNativePath(imageURI, function(result) {
                        document.getElementById('picture_msg').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
                             /* window.FilePath.resolveNativePath(imageURI, function(result) {
                              document.getElementById('picture_msg').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded."; */
                             // onSuccess code
                             //$('#image-upload img').attr('src')
                             //imageURI = document.getElementById('pimage').getAttribute("src");
                              //imageURI = result;
                              //uri = result;
                             //alert(uri);
                        img.src = imageURI;
                        img.width = 100;
                        img.height = 100;
                         // });            
                        //alert(uri);
                    },
                function(error) {
                        document.getElementById('picture_msg').innerHTML = "Upload failed: Code = "+error.code;
                    }, options);
                }
                else {
                    document.getElementById('picture_msg').innerHTML = "Server Not Found";
                }
            }
            catch(exce) {
                alert(exce);
            }
        });
        },
        function(e) {
            console.log("Error getting picture: " + e);
            document.getElementById('picture_msg').innerHTML = "No Image Found";
        },
        {
            quality: 50,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
        }
    );
}