You need to sign in to do that
Don't have an account?
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: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...
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
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..
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
Hi,
Please let me know the solution if it is resolved