I need to upload image into custom object record as a rich text. Iam trying with "apex:inputFile" but it not working.

I need to develop the page like below screen, Is it possible using visualforce and apex.

enter image description here

Click on Browse button and select image from local system and whenever i click on upload button, the selected image display in red colour box.

Any one have any thoughts on this, Please Suggest me.


  • do you want to display image after upload(Save to DB) or before upload. Commented Sep 9, 2015 at 8:15
  • @Sharma- I need to display image before committed to DB Commented Sep 9, 2015 at 9:10

3 Answers 3


Please take a look at the sample JS code below:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);



and the associated HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />

Also, you can try this sample here.


You need to use apex:image tag to show uploaded image on visualforce page.

More info on image tag; apex:image


Here is a link describing how to show a image in RichText Field with VF and Apex.

***************Apex Class***************

public class ImagInsertionIntoRichText

 public String naam{get;set;}
 public ID folderid{get;set;}
 public Blob file{get;set;}

 public void insrt()

 Document d= new Document();

 d.name = naam;
 d.body=file; // body field in document object which holds the file.
 d.folderid='00l90000000inFEAAY'; //folderid where the document will be stored insert d;
 insert d;

 Case cs = new Case();
 cs.FirstExample__Comments__c = '<img src="https://rustagiankit-developer-edition--c.ap1.content.force.com/servlet/servlet.FileDownload?file='+d.id+'" width="500" height="281"></img>'; //FirstExample is namespace & Comments__c is Rich Text Area field
 cs.Status = 'New';
 cs.Origin = 'Web';
 insert cs;
***************VF page***************

<apex:page controller="ImagInsertionIntoRichText">
  <apex:outputLabel value="Document Name"></apex:outputLabel>
  <apex:inputText id="name" value="{!naam}"/>

  <apex:outputLabel value="Upload Document"></apex:outputLabel>
  <apex:inputfile value="{!file}"></apex:inputfile>

  <apex:commandButton value="Save" action="{!insrt}" id="save"/>

Salesforce also recomends similar approach when uploading the images through DataLoader. https://help.salesforce.com/apex/HTViewSolution?id=000002745&language=en_US

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .