Forum Discussion

iahiqosolutions's avatar
iahiqosolutions
Advisor
13 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
    13 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
13 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