Android Html5/java app: mosync gallery upload & send email

Question

Im trying to customize the Mosync Photo gallery sample that you can find here and here.

This is an Html/java app wich take a snaphot and then upload the taken picture to a web server via a php file ( in this case the file is upload.php)

Everythings works fine for me but i would like to add an email field and ask user to type his email adress into this field before uploading. I would like to send out this email with the picture attached but want to do this on server side (php) after upload is complete.

I have tried to add a mail function (with a pre defined sendto adress and a link to the picture) into the upload.php file and it works but then i can't get the return status message on device telling to user that upload is complete.This is ennoying as user don't know then if process is completed

I'm blocking on different steps: 1: How to recuperate the email adress typed by the user and passing it to upload.php 2: How to add the uploaded picture as attachement and send it to the user 3: How to keep the status message being displayed on device?

Is anyone here have encounter the same questions? Is anyone have experience with this sample Mosync App?

Thanks for any help

Below the upload.php file used:

<?php
ini_set("display_errors", "1");
ini_set("log_errors", "1");
error_reporting(-1);


function mylog($message)
{
$file = 'mylog.txt';
// Open the file to get existing content
$current = file_get_contents($file);
// Append a line to the file
$current .= "$message\n";
// Write the contents back to the file
file_put_contents($file, $current);
}

function uploadPhoto()
{
$targetPath = "test/" . basename($_FILES["file"]["name"]);

if (fileIsOK($_FILES["file"]))
{
    $success = move_uploaded_file($_FILES["file"]["tmp_name"], $targetPath);

    if ($success)
    {
        echo "The file " . basename($_FILES["file"]["name"]) .
        " has been uploaded";

    }
    else
    {
    echo "There was an error uploading the file";
    }
}
else
{
echo "Not a valid image file";
}
 }

function fileIsOK($file)
{
return $file["size"] < 1500000
    && fileIsImage($file["name"]);
}

function fileIsImage($path)
{
return endsWith($path, ".jpeg")
    || endsWith($path, ".jpg")
    || endsWith($path, ".png");
}

function endsWith($haystack, $needle)
{
$expectedPosition = strlen($haystack) - strlen($needle);
return strripos($haystack, $needle, 0) === $expectedPosition;
}

function getPhotoURLs()
{
/*// For debugging.
$urls = getLastTenPhotoURLs();
foreach ($urls as $url)
{
    echo "<a href='$url'>$url</a><br/>\n";
}*/

echo getPhotoURLsAsJSON();
}

function getPhotoURLsAsJSON()
{
$urls = getLastTenPhotoURLs();

return json_encode($urls);
}


// Gets last TEN photo urls.
function getLastTenPhotoURLs()
{

$baseURL = "http:THE URL WHERE PHOTOS WILL BE POSTED";

$baseDir = "test/";

$files = array();

// Add files to table using last mod time as key.
if ($handle = opendir($baseDir))
{
    while (false !== ($file = readdir($handle)))
    {
        if ("." != $file && ".." != $file)
        {
            $files[filemtime($baseDir . $file)] = $file;
        }
    }

    closedir($handle);
}

// Sort by mod time.
ksort($files);

// Last ones first.
$files = array_reverse($files);

// List if URLs.
$urls = array();

// Create a list of URLs to the most recent files.
$fileCounter = 0;
foreach ($files as $file)
{
    ++$fileCounter;
    // We only get TEN recent files (100 is too many!).
    if ($fileCounter > 10)
    {
        // TODO: Move excessive files to an archive directory?
        break;
    }
    array_push($urls, $baseURL . $file);
}

return $urls;
}

function sendHTMLemail($HTML,$from,$to,$subject)
{
$url="http:THE URL OF THE POSTED PHOTOS;
$mailto .= 'THE EMAIL OF THE USER';

$HTML="
<table style='font-size:13px' width='700' border='0' cellspacing='0' cellpadding='3'>
<tr>
<td colspan='2'>Dear friend,<br></td>
</tr>
<tr>
  <td colspan='2' bgcolor='#ffffff'>Attached, you will find the picture taken during our     last event.</strong></td>    
</tr>
<tr>
  <td colspan='2' bgcolor='#ffffff' width='250' >link to the <a  href=".$url.">gallery</a></td>      
</tr>    
</table>";

$from='<noreply@noreply.be>';
$subject='Picture';
$to= $mailto;
$headers = "From: $from\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= //"--$boundary\r\n".
            "Content-Type: text/html; charset=ISO-8859-1\r\n";
            //"Content-Transfer-Encoding: base64\r\n\r\n"; 
             mail($to,$subject,$HTML,$headers);

}



// If file data is posted then upload the file,
// else get the list of image urls.


if (isset($_FILES["file"]))
{

sendHTMLemail($HTML,$from,$to,$subject);
uploadPhoto();  


}
else
{
getPhotoURLs();
}
?>

Answer 1

1: How to pass the email adress to upload.php?

First, get the email address from the field on the HTML page. I assume you added an input field to page-camera.html. Modify the following call to pass on the value from the mail addres field:

mosync.nativeui.callJS(
  mosync.nativeui.MAIN_WEBVIEW,
  "app.uploadPhoto('" + mFileURL + "','" + emailAddress + "')");

This will call the function app.uploadPhoto in index.html with the new extra parameter with the meail address, so it need to be modified as well. Rather than using options.parame = null; use someting like this:

app.uploadPhoto = function(fileURL, emailAddress)
{
  var options = new FileUploadOptions();
  options.fileKey = "file";
  options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
  options.mimeType = app.getMimeType(options.fileName);
  //options.params = null;
  options.params = { email: emailAddress };
  // ... and the rest of the code for the function.
}

The general form of the paraameter list is like this:

options.params = {param1: "value1", param2: "value2"};

Then in the PHP script, you can access the email address like this:

$emailAddress = $_POST["email"];

2: How to add the uploaded picture as attachement and send it to the user?

Perhaps these questions can help with this:

insert image in mail body php send email with image How to attach and show image in mail using php?

3: How to keep the status message being displayed on device?

It may be that there is an error in the PHP script, causing it to fail, and never executing uploadPhoto. Can you debug to see if this is the case.

What you return is the string output by echo, that will be passed on to JavaScript in the app.

The current PhotoGallery app does not display this string, but it should really. In index.html, rather than using this:

alert("Photo uploaded");

This should be used instead:

alert(result.response);

This way you can check the result and pass data back and if you wish directly display the result string to the user.