Image upload directly from camera

Hey everyone,

This is more of a solution than a question. I've just spent the morning trying to work out how to upload an image file. There are a few code examples on here but none of them seemed to work. I think the key is to specify the headers when you createHTTPClient.

So, here's my complete code (you can just copy this into an app.js file and run it straight away)...

Titanium.UI.setBackgroundColor('#000');
 
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
});
 
var textfield = Titanium.UI.createTextArea({color:'#333',backgroundColor:'#ddd',borderRadius:5,value:'result of upload... wait for data!',height:200,width:300,top:20,visible:true});
 
win1.add(textfield);
 
win1.open();
 
Titanium.Media.showCamera({
    success:function(event)
    {
        var image = event.media;
        var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'camera_photo.png');
        f.write(image);
        win1.backgroundImage = f.nativePath;
 
        var data_to_send = { 
            "file": f.read(), 
            "name": 'camera_photo.png' 
        };
        xhr = Titanium.Network.createHTTPClient();
        xhr.setRequestHeader("enctype", "multipart/form-data");
        xhr.setRequestHeader("Content-Type", "image/png");
        xhr.open("POST","http://mydomain.com/uploadfile.php");
        xhr.send(data_to_send); 
        xhr.onload = function() {
            textfield.value = this.responseText;
            Ti.API.info(this.responseText); 
        };
 
    },
    cancel:function()
    {
 
    },
    error:function(error)
    {
        // create alert
        var a = Titanium.UI.createAlertDialog({title:'Camera'});
        // set message
        if (error.code == Titanium.Media.NO_CAMERA)
        {
            a.setMessage('Device does not have video recording capabilities');
        }
        else
        {
            a.setMessage('Unexpected error: ' + error.code);
        }
        // show alert
        a.show();
    },
});

Right, and here's the contents for uploadfile.php which you can put on your server... (it's actually just the code from the w3schools website!)

<?php
ini_set('max_upload_filesize', 8388608);
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
 
    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
?>

Hope this helps someone! :)

Cheers,

Michael

change the sequence: xhr.open("POST","http://mydomain.com/uploadfile.php"); xhr.setRequestHeader("enctype", "multipart/form-data"); xhr.setRequestHeader("Content-Type", "image/png"); xhr.send(data_to_send);

Thanks so much for sharing this I had to deleted some code to get it to work for me

xhr.setRequestHeader("enctype", "multipart/form-data"); xhr.setRequestHeader("Content-Type", "image/png");

Figured it out, turned out my server doesn't allow for this kind of access. It worked once I put it up somewhere else. I have WebHostingPad. Anyone know if this is a setting I can change? I turned all related file permissions to x777 just in case but still no luck.

Thanks for posting this; it has saved me a bag of time. However I was still getting a return code of "1" (uploaded file too large) until I changed the php.ini value for UPLOAD_MAX_SIZE (not the ini variable you specify in your code - perhaps this is php-implementation-specific)

Hi there,

this doesn't work when i try and send over 3G. It says:

"Notice: Undefined index: file"

(i added the following to get this output)

ini_set('display_errors', 1); ini_set('log_errors', 1); error_reporting(E_ALL);

It seems it doesn't send the file over 3g - only if connected via wifi.

Looks like it should work but I keep getting this response:

[INFO] <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
 
<html><head>
 
400 Bad Request
 
</head><body>
 
<h1>Bad Request</h1>
 
<p>Your browser sent a request that this server could not understand.<br />
 
</p>
 
<p>Additionally, a 404 Not Found
 
error was encountered while trying to use an ErrorDocument to handle the request.</p>
 
</body></html>

It would seem it can't find my uploadfile.php on my server but I've tested the same upload code with a browser based post file pass and it uploads to the server just fine. I do have it in a subdirectory so its at http://mydomain.com/directory/uploadfile.php but this shouldn't be problem I believe. I changed the sequence of header settings and got rid of it all together, no luck. Any ideas?