How to fetch images on VF Page which were stored in a Document folder

Question

I want to create a VF Page which displays data about doctors. Along with general attributes like name, fee, schedule, I want to fetch image of the doctor on the page which I uploaded in a Document folder defined by me.

I created a form to upload image and other attributes. The image saved into the folder in Documents. This the code of the VF Page

    <apex:page showHeader="false"  controller="Controller004"  sidebar="false" standardStylesheets="false">
<style type="text/css">


</style>
<apex:pageBlock >
<apex:pageBlockSection title="Record of avalaible Doctors" >
<apex:form >
<apex:pageBlockTable value="{!obj}" var="a" columns="4" cellpadding="15px">

 <apex:column headerValue="Name">
 <apex:outputField value="{!a.Full_Name__c}"  />
 </apex:column>
 <apex:column headerValue="Fee">
<apex:outputField value="{!a.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:outputField value="{!a.schedule__c}"/>
</apex:column>
<apex:column headerValue="Photo" >
<apex:image url="{!imageURL}" height="300px" width="200px" />
</apex:column>
</apex:pageBlockTable>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Controller of the page:

    global class Controller004{

public List<Doctor__c> obj{get;set;}
public String imageURL{get;set;}

public Controller004(){
obj = [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c];
imageURL='/servlet/servlet.FileDownload?file=';
List< document > documentList=[select Name from document where FolderID='00l280000019XKt'];

    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
}
}

when I view the page I found that the same image is fetched for all records. What's the solution of it so I get image that I uploaded for corresponding record.

Here is the code of the form which I used to insert new record

<apex:page showHeader="false" controller="Controller002">
<apex:pageBlock title="Form">
<apex:pageBlockSection title="Fill the following form to create a new record of a Doctor">
<apex:form >
<apex:pageBlockTable value="{!li}" var="x" rows="5">
<apex:column headerValue="Full Name">
<apex:inputField value="{!x.Full_Name__c}"/>
</apex:column>
<apex:column headerValue="Fee">
<apex:inputField value="{!x.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:inputField value="{!x.schedule__c}"/>
</apex:column>
<apex:column headerValue="Username">
<apex:inputField value="{!x.UserName__c}"/>
</apex:column>
<apex:column headerValue="Password">
<apex:inputField label="Password" value="{!x.Password__c}"/>
</apex:column>
<apex:column headerValue="Upload Picture">
<apex:inputFile value="{!document.body}" filename="{!document.name}"/>
</apex:column>
</apex:pageBlockTable>
<apex:commandButton action="{!insertnew}" value="Save"/>

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

and the controller of the page is:

    public  class Controller002{
public List<Doctor__c> li{get;set;}
public Document document {
    get {
      if (document == null)
        document = new Document();
      return document;
    }
    set;
 }
public Controller002(){
li = new List<Doctor__c>();
Doctor__c obj = new Doctor__c();
li.add(obj);
}
public PageReference insertnew(){
document.AuthorId = UserInfo.getUserId();
document.FolderId ='00l280000019XKt';
insert document;
insert li;
PageReference pr = new PageReference('/apex/doctordata');
pr.setRedirect(true);
return pr;
}

}

This is the appointment page on which we want to display the details

    <apex:page showHeader="false"  controller="Controller004"  sidebar="false" standardStylesheets="false">
<style type="text/css">


</style>
<apex:pageBlock >
<apex:pageBlockSection title="Record of avalaible Doctors" >
<apex:form >
<apex:pageBlockTable value="{!obj}" var="a" columns="4" cellpadding="15px">

 <apex:column headerValue="Name">
 <apex:outputField value="{!a.Full_Name__c}"  />
 </apex:column>
 <apex:column headerValue="Fee">
<apex:outputField value="{!a.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:outputField value="{!a.schedule__c}"/>
</apex:column>
<apex:column headerValue="Photo" >
<apex:image url="{!a.imageURL}" height="300px" width="200px" />
</apex:column>
</apex:pageBlockTable>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

this is the controller:

global class Controller004{   
    public List<Doctor__c> obj{get;set;}
    public List<DoctorWrapper> obj{get;set;}        

    public Controller004(){
        obj = [select Full_Name__c, Fee__c, schedule__c from Doctor__c];
        Map<Id,Id> mapDoctorIdAttachmentId = new Map<Id,Id>();
        for(Attachment attachment : [Select Id from Attachment where ParentId In : obj]){
            mapDoctorIdAttachmentId.put(attachment.ParentId,attachment.Id);
        }
        for(Doctor__c doctor : [select Full_Name__c, Fee__c, schedule__c from Doctor__c]) {
            obj.add(new DoctorWrapper(doctor,'/servlet/servlet.FileDownload?file='+mapDoctorIdAttachmentId.get(doctor.Id)));
        }
    }

    public class DoctorWrapper {
        public Doctor__c doctor;
        public String imageURL;
        public DoctorWrapper(Doctor__c doctor,String imageURL){
            this.doctor = doctor;
            this.imageURL = imageURL;
        }           
    }
}

Answer 1

Instead of using Document I would recommend using Attachment. So form where you get doctor details along with doctor image should be

VF Page

<apex:page showHeader="false" controller="Controller002">
    <apex:pageBlock title="Form">
        <apex:pageBlockSection title="Fill the following form to create a new record of a Doctor">
            <apex:form >
                <apex:pageBlockTable value="{!li}" var="x" rows="5">
                    <apex:column headerValue="Full Name">
                        <apex:inputField value="{!x.Full_Name__c}"/>
                    </apex:column>
                    <apex:column headerValue="Fee">
                        <apex:inputField value="{!x.Fee__c}"/>
                    </apex:column>
                    <apex:column headerValue="Schedule">
                        <apex:inputField value="{!x.schedule__c}"/>
                    </apex:column>
                    <apex:column headerValue="Username">
                        <apex:inputField value="{!x.UserName__c}"/>
                    </apex:column>
                    <apex:column headerValue="Password">
                        <apex:inputField label="Password" value="{!x.Password__c}"/>
                    </apex:column>
                    <apex:column headerValue="Upload Picture">
                        <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}"/>
                    </apex:column>
                </apex:pageBlockTable>
                <apex:commandButton action="{!insertnew}" value="Save"/>                
            </apex:form>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

and the controller of the page is:

public  class Controller002{
    public List<Doctor__c> li{get;set;}
    public Attachment attachment {
        get {
          if (attachment == null)
            attachment = new Attachment();
          return attachment;
        }
        set;
     }
    public Controller002(){
        li = new List<Doctor__c>();
        Doctor__c obj = new Doctor__c();
        li.add(obj);
    }
    public PageReference insertnew(){
        attachment.ParentId = li[0].Id;         
        insert attachment;
        insert li;
        PageReference pr = new PageReference('/apex/doctordata');
        pr.setRedirect(true);
        return pr;
    }    
}

Then your controller where you show the image, you should use wrapper class to hold your doctor and imageurl

global class Controller004{   
    public List<Doctor__c> obj{get;set;}
    public List<DoctorWrapper> obj1{get;set;}       

    public Controller004(){
        obj = [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c];
        Map<Id,Id> mapDoctorIdAttachmentId = new Map<Id,Id>();
        for(Attachment attachment : [Select Id from Attachment where ParentId In : obj]){
            mapDoctorIdAttachmentId.put(attachment.ParentId,attachment.Id);
        }
        for(Doctor__c doctor : [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c]) {
            obj1.add(new DoctorWrapper(docter,'/servlet/servlet.FileDownload?file='+mapDoctorIdAttachmentId.get(doctor.Id)));
        }
    }

    public class DoctorWrapper {
        public Doctor__c doctor {get; set;}
        public String imageURL {get; set;}
        public DoctorWrapper(Doctor__c doctor,String imageURL){
            this.doctor = doctor;
            this.imageURL = imageURL;
        }           
    }
}

Your VF page should be (only the pageblock table)

<apex:pageBlockTable value="{!obj1}" var="a" columns="4" cellpadding="15px">
    <apex:column headerValue="Name">
        <apex:outputField value="{!a.doctor.Full_Name__c}"  />
    </apex:column>
    <apex:column headerValue="Fee">
        <apex:outputField value="{!a.doctor.Fee__c}"/>
    </apex:column>
    <apex:column headerValue="Schedule">
        <apex:outputField value="{!a.doctor.schedule__c}"/>
    </apex:column>
    <apex:column headerValue="Photo" >
        <apex:image url="{!a.imageURL}" height="300px" width="200px" />
    </apex:column>
</apex:pageBlockTable>