How to upload an image with REST API

Hey Henrik,

The URL you would want to use in this case is: 

/restapi/vc/users/id/${user.id}/media/albums/default/public/images/upload

However, your users would then see an xml response. You would probably be better off using an ajax call for this.

Here is an example from DougS:

<form id="upload-form" action="/restapi/vc/users/self/media/albums/default/public/images/upload" method="post" enctype="multipart/form-data">
           <input type="file" name="image.content" id="image.content" />
           <input type="submit" value="submit" />
       </form>
       <div id="upload-form-results">
       </div>
 
       <@liaAddScript>
              ;(function($) {
                     var imageFormLogic = {
                           beforeSubmit: function() {
                                  // TODO: localize the text below
                                  $('#upload-form-results').html("Submitting...");
                           },
                           success: function(data) {
                                  //console.log(data);
                                  var results = "";
                                  var status = $(data).find("response").attr("status");
                                  if ("error" == status) {
                                         results = "error: " + $(data).find("error").find("message");
                                  } else if ("success" == status) {
                                         var image = $(data).find("image");
                                         var imageUrl =  image.children("url").text();
                                         var imageWidth = image.children("width").text();
                                         var imageHeight = image.children("height").text();
                                         results = "image uploaded successfully!";
                                         results += "<div>"
                                         results += '<img src="' + imageUrl + '" width="' + imageWidth + '" height="' + imageHeight + '" />';
                                         results += "</div>"
                                  }
                                  var $out = $('#upload-form-results');
                                  // TODO: localize the text below
                                  $out.append('<div>'+ results +'</div>');
                           }
                     };
 
                     $(document).ready(function() {
                           if (typeof $('#upload-form').ajaxForm == "undefined") {
                                  $.getScript('/html/assets/jquery.form.js', function() {
                                         $('#upload-form').ajaxForm(imageFormLogic);
                                  });
                           } else {
                                  $('#upload-form').ajaxForm(imageFormLogic);
                           }
                     });
              })(jQuery);
       </@liaAddScript>

Hope this helps,

Yuri