var win = Titanium.UI.currentWindow;

var ind=Titanium.UI.createProgressBar({
    width:200,
    height:50,
    min:0,
    max:1,
    value:0,
    style:Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
    top:10,
    message:'Uploading Your Pic',
    font:{fontSize:12, fontWeight:'bold'},
    color:'#888'
});

win.add(ind);
ind.show();

Titanium.Media.openPhotoGallery({

    success:function(event)
    {
        Ti.API.info("success! event: " + JSON.stringify(event));
        var image = event.media;

        var xhr = Titanium.Network.createHTTPClient();

        xhr.onerror = function(e)
        {
            Ti.API.info('IN ERROR ' + e.error);
        };
        xhr.onload = function()
        {
            Ti.API.info('IN ONLOAD ' + this.status + ' readyState ' + this.readyState);
        };
        xhr.onsendstream = function(e)
        {
            ind.value = e.progress ;
            Ti.API.info('ONSENDSTREAM - PROGRESS: ' + e.progress);
        };
        // open the client
        xhr.open('POST','http://20qbe.com/tmp/upload.php');

        // send the data
        xhr.send({media:image,username:'fgsandford1000',password:'sanford1000',message:'check me out'});

    },
    cancel:function()
    {

    },
    error:function(error)
    {
    },
    allowImageEditing:true


});

Titanium.UI.currentWindow.close();

<?php
print_r ( $_FILES [ 'media' ] );
$target = "upload/";
$target = $target . basename( $_FILES['media']['name']) ;
$ok=1;
if(move_uploaded_file($_FILES['media']['tmp_name'], $target))
{
echo "The file ". basename( $_FILES['media']['name']). " has been uploaded";
}
else {
echo "Sorry, there was a problem uploading your file.";
}
?>

13 Answers

• I know this is an old thread, but I just stumbled across something yesterday that might apply to you all.

  
  xhr.setRequestHeader("ContentType", "image/jpeg");
  

• Is Appcelerator staff can't look in this issue?

• I ran a network sniffer and found out why there is no image information (name or extension) being passed.
  Please see these two links:

  the first one shows contents of a packet when I post from a regular web form
  http://pastie.org/private/ldaqqyfhtw2ecveydzsccw

  The second one is xhr Post from android emulator.

  http://pastie.org/private/wbnzzvxnrc7y2rrcxkjeq

  As you can see, there is no Encapsulated multipart part: (image/pjpeg) section in th second one.

  APPCELERATOR ENGINEERS– CAN YOU PLEASE TAKE A LOOK AND HELP US!!!

• I've found this to be pretty helpful:
  https://gist.github.com/furi2/1378595

  I'm trying to figure out a similar issue, and am trying to piece together everything I can google. Here's my approach:

  1. The API I'm posting an image to will only take multipart/form-data, which I hear its enctype can be set as a header in android, but doesn't work on iOS

  2. Browsers are pretty good at doing all this automatically. I've been using an html file with a POST form, and then using Firefox HTTP live headers to figure out exactly what correct traffic should look like.

  3. Multipart/form-data can support several sections called content-dispositions. You end up with something like this:
     ~~~

  ——-boundary
  Content-Disposition: form-data; name="mytoken"

  asdfNoteThatBoundaryAlwaysBeginsWithTwoDashes
  ——-boundary

  Content-Disposition: form-data; name="othertoken"

  asdfAnotherTokenValue=
  ——-boundary

  Content-Disposition: form-data; name="mediafile"; filename="icon.png"
  Content-Type: image/png // note: in the gist above, you'll be using octet-stream

  // <blob data goes here>

  ——-boundary–

  
  4. You define your boundary in a setRequestHeader:
  

  xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

  Note that the boundaries you see will be --prepended by two additional dashes
  And the last boundary will be followed by two dashes-- indicating the end.
  Wikipedia has a good article on multipart.
  
  5. Dealing with the file:
  You need to do a Ti.Filesystem.getFile.  Then put it into a stream.  Then sandwich the file's stream between the content disposition strings (also in buffer format).  Then you take the entire buffer and do a .toBlob().  This part is kind of tricky, but all laid out in the gist above.
  
  6. Finally, you send the request like:
  

  xhr.send(blob);

  All the code is pretty much in the URL gist above.  It took me a while to wrap my head around it.  
  
  7. To check your work, open up wireshark:
  Install XQuartz
  Install Wireshark
  From the XQuartz bash prompt, type:
  

  open /Applications/Wireshark.app
  ~~~
  Select an interface and hit the play button.

  You should see a request to your upload URL, and drill down to see whether your image and tokens look ok.

  Again, still haven't quite nailed down the process, but this is what I have collected so far.

• Can you share the output of the print_r's and echo's?

• I would also like the find the solution to this. The photo is sent with a mime type of 'application/octet-stream' and the extension as well as the filename are lost.

• Hello Kartik,

  I am having same problem,Can you got any solution on this issue?

• This is an old topic and still there is an issue?

  That is bad.

  I need the answer to this question as well.

• Hey hi everyone! Sorry but I was away for sometime. This issue is not solved! Which is really bad. May be someone can connect with me to solve this!

  http://twitter.com/mystyleonfire

• Resolved yet, got solution?

• Anyone got anywhere with this yet? I am having to resort to using server side code to read the 'type' data, then add a file extension onto the end of the random filename XHR generates. I would much rather just use the filename of the actual image that I upload!

  Mental.

• It's not a very elegant solution but you could create a hidden form field that is populated with the image name prior to form submission.

  You could then pull the image name from that field in the POST variables in your receiving script.

• xhr.setRequestHeader("Content-type", "multipart/form-data");