+ Start a Discussion
singarasingara 

Image Upload using visualforce and saving in custom formula field how? Please help me

Hi Every one,

 

I have one requirment, I have to create one custom formula filed  in account object ie. "Photo__c" (i dont know how to create it ) and I have to upload an image using visualforce page and save this image to "Photo__c" field. while i have to show this image in visualforce page again.

 

How to achieve this functionality, Please help me out of this...

 

Thanks in adv........

 

Best Answer chosen by Admin (Salesforce Developers) 
V'NathV'Nath

Create the url Field (Photo__c ) on Account object .

 

Please study below code , you will get the idea how to Achieve your requirement  

public with sharing class mycontact{
    //Variable Declaration
    private final contact con;
    public string Conlastname{get;set;}
    public string conphone{get;set;}
    public string conemail{get;set;}
    public string Conmobilephone{get;set;}
    public string Accid='';
    public blob Photo{get;set;}
    public string photoname{get;set;}
    public string photourl{get;set;}
    //Contstructor 
    public mycontact(apexpages.standardController controller){
        con=(Contact)controller.getRecord();
    }
    
    //this method updates the Contact with photourl and insert The Attachment Record
    public void UploadPhoto(){
        try{
            con.lastname = conlastname;  
            con.email = conemail;
            con.phone = conphone;
            con.mobilephone = conmobilephone;
            insert con;
           // Accid = ApexPages.currentPage().getParameters().get('id');  
           // inserting attachement with Attached photo      
            Attachment objA=new Attachment();
            objA.body = photo;
            objA.name = 'testname';
            objA.parentid= con.id;
            objA.ContentType = 'application/jpg';
            insert objA;
            string Attid= objA.id;
            string attachmentid=Attid.substring(0,15);
            con.imageUrl__c = '/servlet/servlet.FileDownload?file='+attachmentid;
            update con;
            photourl = con.imageurl__c;        
        }catch(Exception e){
            system.debug('Exception message'+e);
        }
     } 
}

 

<apex:page standardController="contact" sidebar="false" extensions="myAccount">    
    <style type="text/css">
       .img{width:100px !important;} 
       .bPageBlock .detailList tr td, .bPageBlock .detailList tr th, .hoverDetail .bPageBlock .detailList tr td, .hoverDetail .bPageBlock .detailList tr th { border-bottom: none !important;}
       .OptPanel{width:50%;float:left;padding-top:20px;borde:none !important; }   
       .Optpanel1{float:right;padding-right:100px;}   
       .bPageBlock, .individualPalette .bPageBlock
       {
            border: none !important;
           background:none !important;
       }
   
    </style>
    <apex:form >
         <fieldset>
            <legend>Update Your Contact Info</legend>
                <apex:outputpanel layout="block" styleclass="OptPanel">
                    <apex:pageblock mode="maindetail" >
                        <apex:pageblockSection columns="1">
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Contact Name" />
                                <apex:inputtext value="{!conlastname}" />
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Phone" />
                                <apex:inputtext value="{!conphone}"/>
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Email" />
                                <apex:inputtext value="{!conemail}" /> 
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Mobile" />
                               <apex:inputtext value="{!conMobilePhone}" /> 
                            </apex:pageblockSectionItem>
                        </apex:pageblockSection>
                    </apex:pageblock>
               </apex:outputpanel>
                <apex:outputpanel layout="block" styleclass="Optpanel1">
                    <apex:pageblock mode="maindetail" >           
                        <apex:pageblocksection columns="1" >
                              <apex:image value="{!photourl}" url="{!photourl}"  rendered="{!if((photourl == ''),false,true)}" styleclass="img">   </apex:image>
                              <apex:image rendered="{!if((photourl == ''),true,false)}" url="https://c.cs12.content.force.com/profilephoto/005/F" styleclass="img" / >                  
                              <apex:inputFile value="{!photo}"> </apex:inputFile> 
                              <apex:commandButton value="Upload photo" action="{!uploadphoto}" />                                    
                        </apex:pageblocksection>
                    </apex:pageblock>
                 </apex:outputpanel>
           </fieldset>
    </apex:form>
</apex:page>

 

if you want to show image in Vf page , you need to Create Attachment with currently attached file and prepare url  for it , and update your Account with url . and display it in your Vf page .

Regards,

V'Nath

All Answers

V'NathV'Nath

Create the url Field (Photo__c ) on Account object .

 

Please study below code , you will get the idea how to Achieve your requirement  

public with sharing class mycontact{
    //Variable Declaration
    private final contact con;
    public string Conlastname{get;set;}
    public string conphone{get;set;}
    public string conemail{get;set;}
    public string Conmobilephone{get;set;}
    public string Accid='';
    public blob Photo{get;set;}
    public string photoname{get;set;}
    public string photourl{get;set;}
    //Contstructor 
    public mycontact(apexpages.standardController controller){
        con=(Contact)controller.getRecord();
    }
    
    //this method updates the Contact with photourl and insert The Attachment Record
    public void UploadPhoto(){
        try{
            con.lastname = conlastname;  
            con.email = conemail;
            con.phone = conphone;
            con.mobilephone = conmobilephone;
            insert con;
           // Accid = ApexPages.currentPage().getParameters().get('id');  
           // inserting attachement with Attached photo      
            Attachment objA=new Attachment();
            objA.body = photo;
            objA.name = 'testname';
            objA.parentid= con.id;
            objA.ContentType = 'application/jpg';
            insert objA;
            string Attid= objA.id;
            string attachmentid=Attid.substring(0,15);
            con.imageUrl__c = '/servlet/servlet.FileDownload?file='+attachmentid;
            update con;
            photourl = con.imageurl__c;        
        }catch(Exception e){
            system.debug('Exception message'+e);
        }
     } 
}

 

<apex:page standardController="contact" sidebar="false" extensions="myAccount">    
    <style type="text/css">
       .img{width:100px !important;} 
       .bPageBlock .detailList tr td, .bPageBlock .detailList tr th, .hoverDetail .bPageBlock .detailList tr td, .hoverDetail .bPageBlock .detailList tr th { border-bottom: none !important;}
       .OptPanel{width:50%;float:left;padding-top:20px;borde:none !important; }   
       .Optpanel1{float:right;padding-right:100px;}   
       .bPageBlock, .individualPalette .bPageBlock
       {
            border: none !important;
           background:none !important;
       }
   
    </style>
    <apex:form >
         <fieldset>
            <legend>Update Your Contact Info</legend>
                <apex:outputpanel layout="block" styleclass="OptPanel">
                    <apex:pageblock mode="maindetail" >
                        <apex:pageblockSection columns="1">
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Contact Name" />
                                <apex:inputtext value="{!conlastname}" />
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Phone" />
                                <apex:inputtext value="{!conphone}"/>
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Email" />
                                <apex:inputtext value="{!conemail}" /> 
                            </apex:pageblockSectionItem>
                            <apex:pageblockSectionItem >
                                <apex:outputLabel value="Mobile" />
                               <apex:inputtext value="{!conMobilePhone}" /> 
                            </apex:pageblockSectionItem>
                        </apex:pageblockSection>
                    </apex:pageblock>
               </apex:outputpanel>
                <apex:outputpanel layout="block" styleclass="Optpanel1">
                    <apex:pageblock mode="maindetail" >           
                        <apex:pageblocksection columns="1" >
                              <apex:image value="{!photourl}" url="{!photourl}"  rendered="{!if((photourl == ''),false,true)}" styleclass="img">   </apex:image>
                              <apex:image rendered="{!if((photourl == ''),true,false)}" url="https://c.cs12.content.force.com/profilephoto/005/F" styleclass="img" / >                  
                              <apex:inputFile value="{!photo}"> </apex:inputFile> 
                              <apex:commandButton value="Upload photo" action="{!uploadphoto}" />                                    
                        </apex:pageblocksection>
                    </apex:pageblock>
                 </apex:outputpanel>
           </fieldset>
    </apex:form>
</apex:page>

 

if you want to show image in Vf page , you need to Create Attachment with currently attached file and prepare url  for it , and update your Account with url . and display it in your Vf page .

Regards,

V'Nath

This was selected as the best answer
investinvest

It doesn't work yaar.plz help me out of this trouble anyone ?

veeru417veeru417

Hi veerendranath ,

            i  tried your code ,image is not attached to the attachment of the created contac.

simply it is creating one contact record but image is not attached to the attachements.

i have used page message in the vf it is giving an error saying  below,

 

Contact ID: cannot specify Id in an insert call
 
 
can you tell me what is the problem and how to solve it.i am new to this help me.
 
Thanks in advance.
 
 
 
Regards,
Veerendranath akula

 

 

Hari^pHari^p

Hey Verender 
It is working great man... But we have to do some modifications.
One is visualforce extension controller name. Replace the controller name  '' myAccount " with " myContact " like extensions="myContact".
And we have to create a field Photo__c in the contact object.
and replace  " imageurl__c " with " photo__c " in the code.

 

Great effort Veeru, thanks alot

akshata rajmane 2akshata rajmane 2
Hey Hari can you plaese tell me what is the type of that Photo__c field
Mustafa JhabuawalaMustafa Jhabuawala
Instead of this you can also use default feature for uploading an attachment of salesforce which will save lot of time and you can code less and achieve more
Lakshman KanukolluLakshman Kanukollu
Create a Visualforce page without the standard Salesforce header and display an image using the Visualforce image component.
The page must be named 'DisplayImage'.
It must NOT display the standard Salesforce header.
It must use a Visualforce apex:image component to display this image - https://developer.salesforce.com/files/salesforce-developer-network-logo.png
Lakshman KanukolluLakshman Kanukollu
plzz help on this
 
Srujana D 7Srujana D 7
Hi V'Nath
  i  tried your code ,but i got error like this,
          "The value of attribute "url" associated with an element type "apex:image" must not contain the '<' character"