0

I have a custom visualforce page that mimics the functionality of a chatter group in Salesforce. For each post with an attachment, I am trying to show image icon as the attachment to download in the src tag. The image icon differs based on the kind of the attachment that was added. SO far, I can only load the first image, the rest of the post attachments are not displayed. Below is that chunk of the code that I am using. Why is it not loading for all posts ?

<script id="feed_template" type="text/x-handlers-template">
<img class ="media-object" id="testu"  onclick="imageMap('{{id}}')"  onload="fnImageSrc('{{id}}')" style="cursor: pointer; height: 50px" alt="something"  title="Click to download" src="{!$Resource.Attachment}" > 
</script>   


<script type="text/javascript">
function fnImageSrc(feedItemId){
       console.log('SUCCESSSSS'+feedItemId);
       Visualforce.remoting.Manager.invokeAction(
       '{!$RemoteAction.ChatterFeedController.uploadImage}'
        ,feedItemId, 
       function(result,event){
  if(event.type === 'exception'){
          console.log("exception");
    }else{

      if (result.length>0){

         var file =  result[0].FileType;
         console.log(result+' '+'FILETYPEEEEEE'+' '+file+ ' '+feedItemId);
          if (file == 'CSV'){
               var filetype = document.getElementById('testu');
               filetype.src = "{!$Resource.EXCEL}";
               filetype.onload = function(){}

          }
           else if(file==='PDF'){

              var filetype = document.getElementById('testu');
               filetype.onload = function(){};          
               filetype.src = "{!$Resource.PDF}";
             }
    }

   }
});

        }
</script>



  global with sharing class ChatterFeedController {

 @RemoteAction
  global static List<ContentVersion> uploadImage(String feedItemId) {
  FeedItem[] attachfileFeed = [SELECT Id, RelatedRecordId, ParentId  FROM FeedItem where ParentId = '0F98E0000004UhA' AND Id=:feedItemId];
  String test = attachfileFeed[0].RelatedRecordId;
       System.debug(test+'kikiki--09');
  List<ContentVersion> attachFile =[SELECT Id, Title, FileType from  ContentVersion where Id =: test];
       System.debug(attachFile+ 'dfudf-54-0');
    return attachFile;       
 }   

}
  • Are you having same HTML Id for each image, if yes then Id's should be unique across your HTML. Try using classes to find your images. – Raul Mar 17 '17 at 20:55
  • @RahulSharma: No. Id's are different. I am using Javascript remoting to get different Id's for each post and passing them using Handlebar moustache template.. The "{{id}}" I am passing for the onload function will be dynamically taken for each post.. – Brav Mar 17 '17 at 21:50
  • In your remoting method looks like you are only manipulating one id: "document.getElementById('testu')" – Raul Mar 17 '17 at 21:59
  • @RahulSharma: Yes. Now I see,. Although, how can I pass a varrable id for the image tag so as to uniquely identify and find the correct tag to assign the src to, as suggested by Eric ? – Brav Mar 18 '17 at 12:18
0

I assume you have HTML elements that are associated with each file i.e.

<apex:repeat value="{!fileList}" var="file">
     <td>{!file.Name} <img src="xyz">Image goes here</img></td>
</apex:repeat>

Regardless of the structure you can do this:

<apex:repeat value="{!fileList}" var="file">
     <td>{!file.Name} <img class="dlImage_{!file.Id}" src=""/></td>
</apex:repeat>

Then in your remoting you can set it like so

var filetype = document.getElementByClassName('dlImage_' + result[0].Id);
filetype.src = "{!$Resource.EXCEL}";

Or something similar to that. Basically the className of the <img> tag allows you to uniquely identify and find the correct tag to assign the src to

Now, exactly how you actually do it depends on your markup which you are not showing

|improve this answer|||||
  • Yes. I understand that the class name of the <img> tag needs to be different for each file of the post. I am passing the feed item id of the chatter post (which I am getting from the chatter feed controller class ) inside the handlebar expression. What I am trying now is somewhat like this.. <script id="feed_template" type="text/x-handlers-template"> <img class ="Image_{{id}}" id="testu" onclick="imageMap('{{id}}')" onload="fnImageSrc('{{id}}')" style="cursor: pointer; height: 50px" alt="" title="Click to download" src="{!$Resource.Attachment}" > </script> – Brav Mar 18 '17 at 12:16
  • I am expecting the class name to be unique now and different for each post so that in the function fnImageSrc , it will load the image. var filetype = document.getElementByclass('Image_'+ ???? ); filetype.src = "{!$Resource.EXCEL}"; But how can I get the Feed item Id, {{id}} , in the getdocumentelementbyclass ? Or is there any other way ? – Brav Mar 18 '17 at 12:16
  • If you use jQuery, it would be much easier for Dom manipulation. – Raul Mar 18 '17 at 12:23
  • @RahulSharma - Yes potentially, it is trivial for this part though – Eric Mar 18 '17 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.