Cloud Everything !

Salesforce1 : Share/Upload photo directly to Chatter from mobile camera using Salesforce1 App

1 Comment

Extending the functionality of Chatter check-in, here is the way of attaching image directly from iOS device to Salesforce Chatter feeds using iphone/android camera or photo gallery. This functionality may be announced during Dreamforce 2014


1) Jquery

2) Bootstrap

Salesforce1 compatible Visualforce page:


<apex:page id="checkin" standardController="Account" extensions="CheckInController" showheader="false" doctype="html-5.0" standardStylesheets="false">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<apex:includeScript value="{!$Resource.JQuery1110}"/>
<apex:includeScript value="{!URLFOR($Resource.Bootstrap311, 'js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Bootstrap311, 'css/bootstrap.min.css')}"/>
.margin {margin-top:2px;margin-bottom:2px;}
	<apex:form id="form">
		<div class="container-fluid">
		    <div class="row">
		    <apex:outputpanel id="info" styleclass="bg-primary text-primary col-md-12 col-xs-12" layout="block">
			<apex:outputpanel id="error" styleclass="bg-info text-primary col-md-12 col-xs-12" layout="block">
			<div class="row">
				<div class="input-group">
					<span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span></span>
					<apex:inputTextArea value="{!text}" styleclass="form-control col-md-12" html-placeholder="Share..." rows="5"/>
			<div class="row margin">
			    	<span class="btn btn-primary margin col-md-6 col-xs-6" style="text-align:center;" onclick="$('.file1').click();">
			    	Add an Image
				<!-- 	<apex:commandbutton rerender="error" onclick="" action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6" oncomplete="$('.loading').css({ 'display':'none'});"></apex:commandbutton>  -->
					<apex:commandbutton action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6"></apex:commandbutton>
			<div class="row margin">
					<button onclick="geoFindMe();" class="btn margin col-md-12 col-xs-12" type="button">Reset</button>
		<apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>
		<apex:inputFile title="Add an Image" styleclass="file1" style="opacity:0;display:none;width:100%;" accept="image/*;capture=camera" value="{!image}"/>
<apex:outputpanel id="info">
<div id="out" class="bg-success"></div>

	 if ("geolocation" in navigator) {
  		console.log('Geolocation available');
	} else {
 		alert('Geolocation un-available');
	  if($('.loading') == undefined || $('.loading').length==0)
      $('<div class="loading container-fluid"><span style="position:absolute;display:block;left:45%;top:50%;color:white">Saving...</div>').prependTo(document.body); 
      $('.loading').css({ "position":"absolute",
					      "background-color":"rgba(0, 0, 0, 0.72)"} );
function geoFindMe() {
  var output = document.getElementById("out");
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";

  function success(position) {
    var latitude  = 37.769167;//position.coords.latitude;
    var longitude = -122.433137;//position.coords.longitude;
    var img = '<img width="100%" class="img-rounded" src="' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';

  function error() {
    $(".bg-info").html("Unable to retrieve your location");

  var geo_options = {
  timeout           : 27000

  navigator.geolocation.getCurrentPosition(success, error);
  //var wpid = navigator.geolocation.watchPosition(success, error, geo_options);


Apex Controller:


public with sharing class CheckInController
	public String geolocation {get; set;}
	public String text {get; set;}
	public String error {get;set;}
	public boolean isUser {get;set;}
	public transient blob image {get;set;}
	public CheckInController(ApexPages.StandardController con)
		// TO DO : In case of Standard pages
	// Post to chatter with geolocation
	public pagereference checkIn()
		// Check if geolocation found or not
		if(geolocation==null || geolocation.length()<8)
			error = 'Unable to retreive location';
			return Apexpages.currentpage();
		if(text == null || text.trim().length()==0)
			error = 'Nothing to post';
			return Apexpages.currentpage();
			// Post to chatter of current user
			FeedItem post = new FeedItem();
			post.ParentId = Userinfo.getUserId();
			post.Body = text;
				post.ContentData = image;
	         	post.ContentFileName = 'Location.jpg';
	         	post.Type = 'ContentPost';
	         	post.Body = post.Body + '\nLocation:' + geolocation;
				post.Type = 'LinkPost';
				post.LinkUrl = '' + geolocation;
			insert post;
			image = null;
			post = null;
			text = '';
			geolocation = null;
			error = 'Posted Successfully !';
		catch(Exception ex)
			error = ex.getMessage();
		return Apexpages.currentpage();

Author: Ashwani

Senior Lead Salesforce Consultant and Developer For any question please contact us at

One thought on “Salesforce1 : Share/Upload photo directly to Chatter from mobile camera using Salesforce1 App

  1. Can you please fix the code view for visualforce page?


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s