+ Start a Discussion
AlagarAlagar 

Displaying image from RIch Text Field in vf page

Hi,

 

I have uploaded an image through vf page and stored in a rich text field(Picture__c) of a custom object (Image__c).

i m facing some difficulties in displaying the image from rich text field(Picture__c) in a page block table. 

I have used wrapper class to convert the rich text field (Data type: STRING) in to BLOB values, after converting the it to BLOB the values are displaying something like below...

 

core.filemanager.ByteBlobValue@23b3379d

core.filemanager.ByteBlobValue@4b0836ba

core.filemanager.ByteBlobValue@4b0836ba

core.filemanager.ByteBlobValue@7d9d25de

 

Here is my code..

 

<apex:page standardController="Image__c" extensions="ImageUpload1">
   <apex:form >
         <apex:pageBlock > //to upload the image
                       <apex:pageBlockSection >
                                 <apex:inputField value="{!Image__c.Name}" label="File Name"/>
                                 <apex:inputField value="{!Image__c.Description__c}" />
                                 <apex:pageblockSectionItem >
                                             <apex:Outputlabel value="Browse" for="files" />
                                                        <apex:inputFile id="files" value="{!Image__c.Picture__c}" contentType="{!imageContentType}" fileName="{!imageName}"/>
                                   </apex:pageblockSectionItem>
                     </apex:pageBlockSection>
                     <apex:pageblockButtons location="Bottom" >
                                   <apex:commandButton value="save" action="{!save}"/>
                      </apex:pageblockButtons>
          </apex:pageBlock>

             <apex:pageBlock >  // to display the image 
                      <apex:pageblockTable value="{!wrapperList}" var="i">
                                  <apex:column value="{!i.img.Name}" headerValue="Name"/>
                                  <apex:column value="{!i.img.Description__c}" headerValue="Description"/>

                                    <apex:column headerValue="Picture" >

                                                  <img src="data&colon;MIME/png;base64,{!i.convertToImage}" />
                                     </apex:column>

                                         <apex:column >
                                                     <apex:outputText value="{!i.picture}" />
                                          </apex:column>

                      </apex:pageblockTable>
               </apex:pageBlock>
       </apex:form>
</apex:page>

 

public with sharing class ImageUpload1 {

    public Blob picture {get; set;}
    public Image__c img {get; set;}
    public string imageContentType {get; set;}
    public string imageName {get; set;}
    public List<Image__c> imgRecords {get; set;}
    public List<blobWrapper> wrapperList {get; set;}

     public ImageUpload1(ApexPages.StandardController controller) {
                img = (Image__c)controller.getRecord();
                imgRecords = [select id, Name, Description__c, Picture__c from image__c];

                 wrapperList = new List<blobWrapper>();
                 for(Image__c imgs : imgRecords ){
                             wrapperList.add(new blobWrapper(imgs));
                  }
      }

    public void save(){
            system.debug('@@Name ' + imageName +'**content Type ' + imageContentType );
            insert img;
     }

public class blobWrapper{
    public Blob picture {get; set;}
    public string convertToImage { get; set;}
    public Blob DecodeToImage { get; set;}
    public Image__c img {get; set;}

   public blobWrapper(Image__c rec){
         img = rec;
         if(img.Picture__c != null){
                   system.debug('!!!In:' + img.Picture__c);
                   picture = Blob.valueof(img.Picture__c);
                   convertToImage = EncodingUtil.base64Encode(picture);
                   DecodeToImage = EncodingUtil.base64Decode(convertToImage);
                  system.debug('**In:' + picture + 'Rec: '+ convertToImage );
         }
    }

}

 

thanks in advance...

SRKSRK

why dont you just fatch the rich text box as string & then in VF page use <apex:outputlable> or <apex:panel> with escap="false"

it will rerender you text as a html

AlagarAlagar

SRK,

 

now i have used <apex:outputlabel> with escape="false", its rendering the image perfectly only if its uploaded through UI..

few images are uploaded through VF page, for those the image are displayed as below..

 

core.filemanager.FileBlobValue@4747ae4b

core.filemanager.FileBlobValue@17b92121

core.filemanager.FileBlobValue@2329f1fc

 

 

Is there a way to convert this BLOB value into image..

 

any help is much appreciated..

 

SRKSRK

ok

try to fact it in convert the bolb to string if we achive correct html in string it will solve u r issue

the just bind the string to putput lable with escap=false

 

please lett me know the output in mean will i try at my end

sara77sara77

Hi,

 

Please let me know the solution if it is resolved