Upload File – Upload file as an Attachment OR as a Salesforce File Related to Particular Object using Visualforce Page

Visualforce Page for Upload File as an Attachment OR in Chatter.

2ndTo Upload file as an attachment or as a file using Visualforce,one must have Record Id so that the Uploaded file links with that Record.

In Order to use Bootstrap, JQuery or CSS for Designing purpose you can refer to the following link to access Script files


Upload this Zip file as a static Resource in your Salesforce Org and use it in Visualforce Component.



<apex:stylesheet value="{!URLFOR($Resource.Jquery_ToolKit,'css/vendor/bootstrap.min.css')}"/>

<apex:stylesheet value="{!URLFOR($Resource.Jquery_ToolKit,'css/app.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.Jquery_ToolKit,'js/vendor/jquery.min.js')}"/>


Now Use this Component in your Visualforce Page and use some Apex Input and Output Tags.

  1. <apex:inputText>to get File title and<apex:inputTextarea> to get File Description as Input from User .
  2. <apex:Input file> for choose attachment file.
  3. <apex:commandButton>to Save Attachment .
  4. Jquery function to show to name of file.

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" controller="UploadFileController">


<c:UploadFile_Component />
<!-- Main Section -->
<main class="main-section">

<!-- Header Section -->
<header class="header-section">
<div class="headersection-tagline">
<div class="container">
<div class="tagline-left">Upload File as Attachment</div>
<!-- /Header Section -->

<!-- Form Section -->
<section class="inner-section">
<div class="container">
<div class="formbg-section">
<apex:form styleclass="form-horizontal" id="frm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">File Name :</label>
<div class="col-md-8">
<apex:inputText value="{!AttchName}" styleClass="form-control"/>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label col-md-2">File: </label>
<label class="btn btn-primary" > Browse File
<apex:inputFile value="{!AttchBody}" fileName="{!AttchName}" styleclass="form-control" style="display:none" onchange="filechange(event)"/>
<span class="uploaded-file" style="overflow: hidden; display: -moz-grid;" ></span>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">Description :</label>
<div class="col-md-10">
<apex:inputTextarea styleClass="form-control" value="{!AttchDesc}"/>
<apex:messages />
<div class="col-md-12">
<div class="form-group form-action-toolbar">
<div class="col-md-8 text-left">
<apex:commandButton id="btnsave" action="{!Upload}" styleClass="btn btn-primary" value="Save File as Attachment" />
<apex:commandButton id="btnsave1" action="{!UploadChatterFile}" styleClass="btn btn-primary" value="Save File in Chatter" />
<!-- /.Form Section -->

<!-- /.Main Section-->
 function filechange(e)
 var fileName = e.target.files[0].name;


In order to Insert file as an Attachment Related to Record Just make the instance of Attachment Object and put the Values Like File Title, File Description, Body, Related Record Id.

In Order to Insert file as Salesforce File, first of all we need to make the Lookup field for particular Object with related list in which we want to insert file in Content Version. Please refer to the steps I have performed “I have created 2 Lookup fields in Lead and Account Objects”.

To create Lookup fields in Content Version

Salesforce Files -> Create, Modify, Delete custom fields –> New Field




After creating this Lookup Field Make Instance of Content Version and put Required Fields as we did for Attachment.

Please refer to the controller for more details.

public with sharing class UploadFileController {

Public Id PageId {get;set;}
public Blob AttchBody {get;set;}
public String AttchDesc {get;set;}
public String AttchName {get;set;}
Public Attachment attch {get;set;}

public UploadFileController(){

PageId = ApexPages.CurrentPage().getParameters().get('Id');


public PageReference Upload(){

attch = new Attachment(ParentId=PageId,Description=AttchDesc,Name=AttchName,Body=AttchBody);

insert attch;
AttchBody = null;
AttchDesc = null;
AttchName = null;
catch(Exception ex){
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,ex.getlineNumber()+' '+ex.getMessage()));
return null;

ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
return null;

public PageReference UploadChatterFile() {

ContentWorkspace cw =[SELECT Id FROM ContentWorkspace WHERE DeveloperName = 'Test_Workspace'];

ContentVersion v = new ContentVersion();
v.versionData = AttchBody;
v.title = AttchName;
v.FirstPublishLocationId = cw.Id;
v.pathOnClient = AttchName;

If(PageId.getSObjectType() == Account.sObjectType){
v.Account__c = PageId;
If(PageId.getSObjectType() == Lead.sObjectType){
v.Lead__c = PageId;

v.Description = AttchDesc;

insert v;
AttchBody = null;
AttchDesc = null;
AttchName = null;
catch(Exception ex){
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,ex.getlineNumber()+' '+ex.getMessage()));
return null;

ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully in Chatter'));
return null;

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at sfdcsagarsindhi@gmail.com .




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

SFDC Panther

A hub for Salesforce Tutorial - Salesforce Classic/Lightning

SFDC Knowledge Bank

Solutions With Best Possible Options


Adventures in Salesforce

Analysis Paralysis

Ramblings from a Salesforce Business Analyst

Ajomon Joseph


Adam To Architect

Journey from Adam to Architect

Andy in the Cloud

From BBC Basic to Force.com and beyond...

Sara Has No Limits

Good Programmers Evaluate, Simplify, Automate and Document

Douglas C. Ayers

My journey with Salesforce and Technology

Shruti Sridharan

Salesforce Enthusiast | Tech Addict | IoT Specialist | Travel Maniac | Photography | Music Lover | Foodie

Andrew Boettcher - Salesforce Technologist

Random musings from a dad with a passion for technology...

Nitin Gupta

Just One Idea

Salesforce coding lessons for the 99%

Finally, Apex tutorials for point-and-click admins! Written by a self-taught Google engineer.

Automation Champion

Automating Salesforce One Click at a Time

Pritam Shekhawat

All About Salesforce.com

Sagar Sindhi

Salesforce Developer | Passionate for Salesforce | Salesforce Lover | Trailhead Addicted | Blogger

%d bloggers like this: