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

June 15, 2014 by Ashwani 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

Required:

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')}"/>
<style>
.margin {margin-top:2px;margin-bottom:2px;}
input
</style>
	<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">
				{!$CurrentPage.parameters.info}
			</apex:outputpanel>
			<apex:outputpanel id="error" styleclass="bg-info text-primary col-md-12 col-xs-12" layout="block">
				{!error}
			</apex:outputpanel>
			</div>
			<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>
			</div>
			<div class="row margin">
			    <div>
			    	<span class="btn btn-primary margin col-md-6 col-xs-6" style="text-align:center;" onclick="$('.file1').click();">
			    	Add an Image
					</span>
				</div>
				<div>
				<!-- 	<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>
			</div>
			<div class="row margin">
			    <div>
					<button onclick="geoFindMe();" class="btn margin col-md-12 col-xs-12" type="button">Reset</button>
				</div>
			</div>
		</div>
		<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:form>
<apex:outputpanel id="info">
<div id="out" class="bg-success"></div>
</apex:outputpanel>
<script>

$(document).ready(function()
{
	 if ("geolocation" in navigator) {
  		console.log('Geolocation available');
  		geoFindMe();
	} else {
 		alert('Geolocation un-available');
	}
	$('.btn-success').click(function(){
	  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",
                          "display":"block",
					      "left":"0%",
					      "top":"0",
					      "height":"100%",
					      "width":"100%",
					      "z-index":"1010",
					      "background-color":"rgba(0, 0, 0, 0.72)"} );
   	});
});
function geoFindMe() {
  var output = document.getElementById("out");
  $(".bg-info").html("");
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = 37.769167;//position.coords.latitude;
    var longitude = -122.433137;//position.coords.longitude;
    $(".bg-info").html("");
    var img = '<img width="100%" class="img-rounded" src="https://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:A%7C' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';
	
	$('.geoloc').val(latitude+','+longitude);
    output.innerHTML=img;
    $(".bg-info").html("");
  };

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

  $(".bg-info").html("Locating...");
  $(".bg-success").html("Locating...");
  
  var geo_options = {
  timeout           : 27000
  };

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

</script>
</apex:page>

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';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		if(text == null || text.trim().length()==0)
		{
			error = 'Nothing to post';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		try
		{
			// Post to chatter of current user
			FeedItem post = new FeedItem();
			post.ParentId = Userinfo.getUserId();
			post.Body = text;
			
			if(image!=null)
			{
				post.ContentData = image;
	         	post.ContentFileName = 'Location.jpg';
	         	post.Type = 'ContentPost';
	         	post.Body = post.Body + '\nLocation: http://maps.google.com/maps?q=' + geolocation;
			}
			else
			{
				post.Type = 'LinkPost';
				post.LinkUrl = 'http://maps.google.com/maps?q=' + geolocation;
			}
			
			insert post;
			image = null;
			post = null;
			text = '';
			geolocation = null;
			error = 'Posted Successfully !';
			ApexPages.currentPage().getParameters().put('info',error);
		}
		catch(Exception ex)
		{
			error = ex.getMessage();
		}
		return Apexpages.currentpage();
	}
}

Advertisement