Forum Discussion

iahiqosolutions's avatar
iahiqosolutions
Advisor
12 years ago

Strange avatar picture

Hello guys,   I'm using Lithium REST API, it allows me to upload new images for user. When the image uploading process completes sucessfully, Lithium API returns the URL of uploaded image. Here...
  • iahiqosolutions's avatar
    iahiqosolutions
    12 years ago
    Hey DougS,

    thank you once again for you replies.
    I guess I have found the root of evil.
    Lithium returns "strange" image if image hasn't been approved by moderator.
DougS's avatar
DougS
Khoros Oracle
12 years ago

Hi iahiqosolutions,

 

Can you share the code that you are using to parse the image URL from the returned XML?  I might be able to tell you why you are seeing the "broken" image instead of the real one based on that.

 

Alternatively, here is some example markup that uses the jquery forms plugin to make an ajax form for uploading an image and parses the uploaded image and displays it for you after you've uploaded it (replace "http://yourcommunitydomain" with your community domain):

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title> Example Ajax Image Upload Form </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
  <script src="http://malsup.github.com/jquery.form.js"></script> 
 </head>
 <body>
   <form id="upload-form" action="http://yourcommunitydomain/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>
  <script type="text/javascript">
    ;(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);
  </script>
 </body>
</html>

 

Two things to note about using the above example on your site:

  1. The user must be logged into the Lithium community you are uploading an image to.
  2. If the page is being hosted on another domain/subdomain, you may need to work with Lithium support to configure that site to allow cross-domain ajax requests from that domain/subdomain
  • iahiqosolutions's avatar
    iahiqosolutions
    Advisor
    12 years ago

    Hello DougS,

     

    Thank you for your reply,

     

    I'm use standard .NET deserialization for deserilizing Lithium REST API responses.

     

    Here is brief example of Image entity:

     

    	[Serializable, XmlType(AnonymousType = true)]
	public class Image : EntityBase
	{
		[XmlElement("url")]
		public string Url { get; set; }
 
		[XmlElement("upload_date")]
		public DateTime UploadDate { get; set; }
 
		[XmlElement("height", typeof(XmlInteger))]
		public int? Height { get; set; }
 
		[XmlElement("width", typeof(XmlInteger))]
		public int? Width { get; set; }
 
		[XmlElement("title")]
		public string Title { get; set; }
 
		[XmlElement("description")]
		public string Description { get; set; }
 
		[XmlElement("thumbnail")]
		public Image Thumbnail { get; set; }
	}

     

    For deserializing string to Image entity I'm uisng 

    XmlSerializer.Deserialize

    standard XML deserializer method.

     

    It works pretty well for all other REST API calls, and I don't expect that image uploading is an exception.

     

    But I guess that something goes wrong when Lithium gererate image URL,

    because I saw a couple of times URLs like the following:

     

    http://%CommunityName%.stage.lithium.com/t5/image/serverpage/image-id/137i286D3365B41F7E77?v=mpbl-1%2fimage-dimensions%2f64x36%3fv%3dmpbl-1

    • DougS's avatar
      DougS
      Khoros Oracle
      12 years ago

      Thanks for the clarification iahiqosolutions -- I didn't see the issue with the url originally but do now -- we are looking into this as a possible bug with image gallery image URL generation.  

       

      Until that is resolved, if you are ok with making another call, you could take the image id you get in the response and make this call like this one to get the url (hopefully the URL will be correctly formated in that case, but please reply to this post if it's not):

       

      http://%CommunityName%.stage.lithium.com/restapi/vc/uploads/images/id/137i286D3365B41F7E77/url