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 is an example:

 

http://%CommunityName%.stage.lithium.com/t5/image/serverpage/image-id/95i51ACAA11F55594F4?v=mpbl-1/image-dimensions/64x36

 

My origin image: 

Desert.jpg

 

But when I try to request image by this url I get the following picture:

 

Gray-Yellow traingle.gif

 

I guess that this picture means that something are going wrong. But I don't understand the reason of that behaviour.
Maybe someone has any ideas?

  • 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