title: Submitting POST form data from a Titanium Mobile App to a Ruby on Rails Web App
body: <p>I'm trying to submit form data from a Titanium Mobile App to a Ruby on Rails Web App. It is a POST multipart request which includes basic data and an image.</p>
  
  <p>I will show the different ways I've tried to submit the data, and the errors I get from the RoR log.</p>
  
  <p>Some details: </p>
  
  <ul>
  <li>The image for <code>problem[avatar]</code> comes from the phone camera. </li>
  <li>The following code is common for all snippets below. It comes before the
  snippets.</li>
  </ul>
  
  <p><strong>Common Code</strong></p>
  
  <pre><code>var url = "http://some_RoR_app.herokuapp.com/problems";
  var client = Ti.Network.createHTTPClient({
      // function called when the response data is available
      onload : function(e) {
          alert('success');
      },
      // function called when an error occurs, including a timeout
      onerror : function(e) {
          alert('error');
      },
      timeout : 60 * 1000
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Way #1</strong></p>
  
  <p><em>Titanium</em></p>
  
  <p>I have saved the form data inside a variable, and then passed on that variable to the <code>send()</code> function.    </p>
  
  <pre><code>var params = {
      'problem[avatar]': $.report_image_view.reportPhoto.toImage(), // returns a [Ti.Blob] object
      'problem[title]': $.report_title_view.title.value,
      'problem[description]': $.report_description_view.description.value,
      'problem[ptype]': $.report_type_view.report_type.value['valueID'],
      'problem[status]': 1,
      'problem[priority]': 2,
      'problem[latitude]': latitude,
      'problem[longitude]': longitude,
      'problem[user_id]': 2
  }
  
  // Prepare the connection.
  client.open("POST", url);
  client.send(params);        
  </code></pre>
  
  <p><em>RoR Log</em></p>
  
  <pre><code>013-09-04T18:30:54.048412+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 18:30:54 +0000
  2013-09-04T18:30:54.248656+00:00 app[web.1]: Processing by ProblemsController#create as MULTIPART_FORM
  2013-09-04T18:30:54.248656+00:00 app[web.1]: [paperclip] Saving attachments.
  2013-09-04T18:30:54.248656+00:00 app[web.1]: Redirected to https://km7.herokuapp.com/problems/32
  2013-09-04T18:30:54.248656+00:00 app[web.1]: Completed 302 Found in 194ms (ActiveRecord: 80.2ms)
  2013-09-04T18:30:54.252433+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=208ms status=302 bytes=103
  2013-09-04T18:30:55.157538+00:00 app[web.1]: Started POST "/problems/32" for 111.222.333.444 at 2013-09-04 18:30:55 +0000
  </code></pre>
  
  <p><em>Result</em></p>
  
  <p>The post is done, but not as intended. A new record is added to the database, but it is empty. In other words, the image is not uploaded, the title is empty, and so is the description, coordinates, and everything else. Only the timestamp and (object) id are set.</p>
  
  <hr>
  
  <p><strong>Way #2</strong></p>
  
  <p><em>Titanium</em></p>
  
  <p>What I have done is, instead of saving the form data inside a variable, and the passing on that variable, I've created the object with the form data as the parameter to pass to the function.</p>
  
  <pre><code>client.open("POST", url);
  client.send({
      "problem[avatar]" : $.report_image_view.reportPhoto.toImage(), // returns a [Ti.Blob] object
      "problem[title]" : $.report_title_view.title.value,
      "problem[description]" : $.report_description_view.description.value,
      "problem[ptype]" : $.report_type_view.report_type["valueId"],
      "problem[status]" : 1,
      "problem[priority]" : 2,
      "problem[latitude]" : latitude,
      "problem[longitude]" : longitude,
      "problem[user_id]" : 2
  }); 
  </code></pre>
  
  <p><em>RoR Log</em></p>
  
  <pre><code>2013-09-04T18:48:48.328758+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 18:48:48 +0000
  2013-09-04T18:48:48.635395+00:00 app[web.1]: Processing by ProblemsController#create as MULTIPART_FORM
  2013-09-04T18:48:48.635395+00:00 app[web.1]: [paperclip] Saving attachments.
  2013-09-04T18:48:48.635395+00:00 app[web.1]: Redirected to https://km7.herokuapp.com/problems/34
  2013-09-04T18:48:48.635395+00:00 app[web.1]: Completed 302 Found in 299ms (ActiveRecord: 66.1ms)
  2013-09-04T18:48:48.644302+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=325ms status=302 bytes=103
  </code></pre>
  
  <p><em>Result</em></p>
  
  <p>Exactly as before. The post is done, but not as intended. A new record is added to the database, but it is empty.</p>
  
  <hr>
  
  <p><strong>Way #3</strong></p>
  
  <p><em>Titanium</em></p>
  
  <p>This time I am passing a string with the parameters passed as if it is a GET. However, I cannot pass the image in this way...or can I?</p>
  
  <pre><code>var post_data =  "problem[title]=Report rest client&amp;problem[latitude]=18.09&amp;problem[longitude]=-67.12&amp;problem[ptype]=1&amp;problem[status]=1&amp;problem[priority]=2&amp;problem[description]=Test description from rest client&amp;problem[user_id]=2&amp;problem[address]=123 Main Street, PR";
  
  // Prepare the connection.
  client.open("POST", url);           
  client.send(post_data);  
  </code></pre>
  
  <p><em>RoR Log</em></p>
  
  <p>I don't know why but it keeps redirecting me to /problems over and over until it gives up.</p>
  
  <pre><code>2013-09-04T19:03:30.982008+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=10ms status=307 bytes=0
  2013-09-04T19:03:36.415999+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:03:36 +0000
  2013-09-04T19:03:36.475568+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=1ms service=64ms status=302 bytes=100
  2013-09-04T19:03:36.476626+00:00 app[web.1]: Processing by ProblemsController#create as JS
  2013-09-04T19:03:36.476626+00:00 app[web.1]:   Parameters: {"problem"=&gt;{"title"=&gt;"Report rest client", "latitude"=&gt;"18.09", "longitude"=&gt;"-67.12", "ptype"=&gt;"1", "status"=&gt;"1", "priority"=&gt;"2", "description"=&gt;"Test description from rest client", "user_id"=&gt;"2", "address"=&gt;"Calle 3, Bo. Coto Sur"}}
  2013-09-04T19:03:36.476626+00:00 app[web.1]: Redirected to https://some_RoR_app.herokuapp.com/problems
  2013-09-04T19:03:36.476626+00:00 app[web.1]: Completed 302 Found in 54ms (ActiveRecord: 26.1ms)
  2013-09-04T19:03:37.428602+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:03:37 +0000
  2013-09-04T19:03:37.532547+00:00 app[web.1]: Processing by ProblemsController#create as JS
  2013-09-04T19:03:37.532547+00:00 app[web.1]:   Parameters: {"problem"=&gt;{"title"=&gt;"Report rest client", "latitude"=&gt;"18.09", "longitude"=&gt;"-67.12", "ptype"=&gt;"1", "status"=&gt;"1", "priority"=&gt;"2", "description"=&gt;"Test description from rest client", "user_id"=&gt;"2", "address"=&gt;"Calle 3, Bo. Coto Sur"}}
  2013-09-04T19:03:37.532547+00:00 app[web.1]: Redirected to https://some_RoR_app.herokuapp.com/problems
  2013-09-04T19:03:37.532547+00:00 app[web.1]: Completed 302 Found in 92ms (ActiveRecord: 61.0ms)
  2013-09-04T19:03:38.457108+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=84ms status=302 bytes=100
  2013-09-04T19:03:38.378766+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:03:38 +0000
  2013-09-04T19:03:38.455542+00:00 app[web.1]: Processing by ProblemsController#create as JS
  2013-09-04T19:03:38.455542+00:00 app[web.1]:   Parameters: {"problem"=&gt;{"title"=&gt;"Report rest client", "latitude"=&gt;"18.09", "longitude"=&gt;"-67.12", "ptype"=&gt;"1", "status"=&gt;"1", "priority"=&gt;"2", "description"=&gt;"Test description from rest client", "user_id"=&gt;"2", "address"=&gt;"Calle 3, Bo. Coto Sur"}}
  2013-09-04T19:03:38.455542+00:00 app[web.1]: Redirected to https://some_RoR_app.herokuapp.com/problems
  2013-09-04T19:03:38.455542+00:00 app[web.1]: Completed 302 Found in 67ms (ActiveRecord: 48.9ms)
  2013-09-04T19:03:39.319540+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:03:39 +0000
  2013-09-04T19:03:39.361228+00:00 app[web.1]: Processing by ProblemsController#create as JS
  2013-09-04T19:03:39.361228+00:00 app[web.1]:   Parameters: {"problem"=&gt;{"title"=&gt;"Report rest client", "latitude"=&gt;"18.09", "longitude"=&gt;"-67.12", "ptype"=&gt;"1", "status"=&gt;"1", "priority"=&gt;"2", "description"=&gt;"Test description from rest client", "user_id"=&gt;"2", "address"=&gt;"Calle 3, Bo. Coto Sur"}}
  2013-09-04T19:03:39.361228+00:00 app[web.1]: Redirected to https://some_RoR_app.herokuapp.com/problems
  2013-09-04T19:03:39.361228+00:00 app[web.1]: Completed 302 Found in 38ms (ActiveRecord: 22.6ms)
  2013-09-04T19:03:39.630525+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:03:39 +0000
  2013-09-04T19:03:39.731993+00:00 app[web.1]: Processing by ProblemsController#create as JS
  2013-09-04T19:03:39.731993+00:00 app[web.1]:   Parameters: {"problem"=&gt;{"title"=&gt;"Report rest client", "latitude"=&gt;"18.09", "longitude"=&gt;"-67.12", "ptype"=&gt;"1", "status"=&gt;"1", "priority"=&gt;"2", "description"=&gt;"Test description from rest client", "user_id"=&gt;"2", "address"=&gt;"Calle 3, Bo. Coto Sur"}}
  2013-09-04T19:03:39.731993+00:00 app[web.1]: Redirected to https://some_RoR_app.herokuapp.com/problems
  2013-09-04T19:03:39.731993+00:00 app[web.1]: Completed 302 Found in 84ms (ActiveRecord: 37.1ms)
  2013-09-04T19:03:39.741297+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=117ms status=302 bytes=100
  </code></pre>
  
  <p><em>Result</em></p>
  
  <p>I don't see any changes in the database. Nothing is saved.</p>
  
  <hr>
  
  <p><strong>Way #4</strong></p>
  
  <p><em>Titanium</em></p>
  
  <p>This time I organize the params object in a different way. Otherwise, it is similar to <strong>Way #1</strong></p>
  
  <pre><code>var params = 
      { problem : {
          avatar : $.report_image_view.reportPhoto.toImage(),
          title : $.report_title_view.title.value,
          description : $.report_description_view.description.value,
          ptype : $.report_type_view.report_type.value['valueID'],
          status : 1,
          priority : 2,
          latitude : latitude,
          longitude : longitude,
          user_id : 2     
      }}
  
  
  // Prepare the connection.
  client.open("POST", url);
  client.send(params);   
  </code></pre>
  
  <p><em>RoR Log</em></p>
  
  <pre><code>2013-09-04T19:19:38.381670+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=4ms service=11ms status=307 bytes=0
  2013-09-04T19:19:41.117687+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 19:19:41 +0000
  2013-09-04T19:19:41.162099+00:00 app[web.1]: NoMethodError (undefined method `stringify_keys' for #&lt;String:0x00000003672638&gt;):
  2013-09-04T19:19:41.162099+00:00 app[web.1]:   app/controllers/problems_controller.rb:29:in `new'
  2013-09-04T19:19:41.162099+00:00 app[web.1]:   app/controllers/problems_controller.rb:29:in `create'
  2013-09-04T19:19:41.162099+00:00 app[web.1]: 
  2013-09-04T19:19:41.162099+00:00 app[web.1]: 
  2013-09-04T19:19:41.162726+00:00 app[web.1]: Processing by ProblemsController#create as URL_ENCODED_FORM
  2013-09-04T19:19:41.162726+00:00 app[web.1]:   Parameters: {"problem"=&gt;"{\n    avatar = \"[object TiBlob]\";\n    description = \"Enter a description\";\n    latitude = \"37.33159255981445\";\n    longitude = \"-122.0305099487305\";\n    priority = 2;\n    status = 1;\n    title = \"A test title\";\n    \"user_id\" = 2;\n}"}
  2013-09-04T19:19:41.162726+00:00 app[web.1]: Completed 500 Internal Server Error in 39ms
  2013-09-04T19:19:41.164682+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=50ms status=500 bytes=643 
  </code></pre>
  
  <p><em>Result</em>
  Nothing was saved in the database. However, this time it explicitly produced a <code>NoMethodError</code> in the <code>new</code> and <code>create</code> methods of the Problems controller.</p>
  
  <hr>
  
  <p><strong>Way #5</strong></p>
  
  <p><em>Titanium</em></p>
  
  <p>This time I'm creating the object as in <strong>Way #4</strong> but passing it directly to the <code>send()</code> method as a parameter, as in <strong>Way #3</strong>.</p>
  
  <pre><code>// Prepare the connection.
  client.open("POST", url);
  client.send({
      problem : {
          avatar : $.report_image_view.reportPhoto.toImage(),
          title : $.report_title_view.title.value,
          description : $.report_description_view.description.value,
          ptype : $.report_type_view.report_type.value['valueID'],
          status : 1,
          priority : 2,
          latitude : latitude,
          longitude : longitude,
          user_id : 2 
  }}); 
  </code></pre>
  
  <p><em>RoR Log</em></p>
  
  <pre><code>2013-09-04T20:16:36.865831+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=3ms status=307 bytes=0
  2013-09-04T20:16:38.772048+00:00 app[web.1]: Started POST "/problems" for 111.222.333.444 at 2013-09-04 20:16:38 +0000
  2013-09-04T20:16:38.808102+00:00 app[web.1]: NoMethodError (undefined method `stringify_keys' for #&lt;String:0x00000005d45f58&gt;):
  2013-09-04T20:16:38.808102+00:00 app[web.1]:   app/controllers/problems_controller.rb:29:in `new'
  2013-09-04T20:16:38.808102+00:00 app[web.1]:   app/controllers/problems_controller.rb:29:in `create'
  2013-09-04T20:16:38.808102+00:00 app[web.1]: 
  2013-09-04T20:16:38.808102+00:00 app[web.1]: 
  2013-09-04T20:16:38.808786+00:00 app[web.1]: Processing by ProblemsController#create as URL_ENCODED_FORM
  2013-09-04T20:16:38.808786+00:00 app[web.1]:   Parameters: {"problem"=&gt;"{\n    avatar = \"[object TiBlob]\";\n    description = \"Fix it asap.\";\n    latitude = \"37.33069610595703\";\n    longitude = \"-122.0306701660156\";\n    priority = 2;\n    status = 1;\n    title = \"A broken water pipe\";\n    \"user_id\" = 2;\n}"}
  2013-09-04T20:16:38.808786+00:00 app[web.1]: Completed 500 Internal Server Error in 30ms
  2013-09-04T20:16:38.809384+00:00 heroku[router]: at=info method=POST path=/problems host=some_RoR_app.herokuapp.com fwd="111.222.333.444" dyno=web.1 connect=2ms service=41ms status=500 bytes=643
  </code></pre>
  
  <p><em>Result</em></p>
  
  <p>Same errors as <strong>Way #4</strong></p>
  
  <hr>
  
  <p>This has been driving me crazy. </p>
  
  <p>Do you know what I am doing wrong? How can I fix this? I'll be happy to answer any questions that could help you help me. Just leave a comment.</p>