<form action="http://www.example.com/upload" method="post"
 enctype="multipart/form-data">
<p>select image:<input type="file" name="image"
 onclick='send("select_button");return false;'></p>

<p><input type="submit" name="Submit" 
value="Search now!" /></p>
</form>

<script>
    function send(event) {
    Ti.App.fireEvent(event);
}
</script>

var image;

Ti.App.addEventListener('select_button', function()
{
    Titanium.Media.openPhotoGallery({

        success:function(event)
        {
            image = event.media;
        },
        cancel:function(){},
        error:function(){},
        allowImageEditing:true
    });
});

3 Answers

• Hi Francesco,

  You would not use an HTML form to POST an image in this case. Once you have a handle on the file, you would upload it via our HTTPClient object, as in:

  var xhr = Titanium.Network.createHTTPClient();
  xhr.onload = function() {
      //one of...
      var doc = this.responseXML.documentElement;
      //or this, for JSON...  var json = JSON.parse(this.responseText);
      //do stuff with response
  };
  xhr.open('POST','http://yourserver.com/upload');
  xhr.send({
      media:image,
      someOtherPOSTparam:'somevalue'
  });
  

• Hi. Thanks for the answer.

  Now i use xhr ( as suggest ), but when i try to send data to server i catch this java exception:

  Error evaluating source: Wrapped java.lang.NullPointerException

  Seems like apps doesn't find the image file, previously selected ( view code above ).

  Any tips?

  Regards.

• Hi,
  I would like to further ask Kevin Whinnery when he mentioned to get the 'handle on the file', what do you mean by that? I am in a similar scenario where I want to build a webapp that create a post (title/content + picture) to my ACS account. Title and content have no issue. The issue I have is the photo field. I tried to get the data from the form once the user has selected the picture file from the browse menu, it turns out that the file path is something like 'c:/fakePath/filename.jpg', I tried removing the 'fakepath' string, hardcoding the actual path of the file \Desktop\filename.jpg, adding '@' as a prefix (like in curl script), and many combinations. Nothing seems to work and I cannot get the picture to save on ACS, the title/content text did get posted though.

  I am following the JS SDK as written here: http://cloud.appcelerator.com/docs/api/v1/posts/create

  Would be grateful for anyone who can help!

  Here is the code snippet I have

      var data = {
          title: "Have you watched the Olympics closing ceremony?",
          content: "it was pretty awesome!",
          photo: "\Users\mickeymouse\Desktop\rising_sun_japans_05.jpg"
      };
  
      sdk.sendRequest('posts/create.json', 'POST', data, function(data) {
          if(data) {
              if(data.meta) {
                  var meta = data.meta;
                  console.log(data);
                  if(meta.status == 'ok' && meta.code == 200 && meta.method_name == 'createPost') {
                      var posts = data.response.posts;
                      console.log(posts);
                  } else console.log('something wrong with meta.status: createTopic');
              } else console.log('something wrong with data.meta: createTopic');
          } else console.log('something wrong with data: createTopic');
      });
  

  Thanks much,
  Kavin