Upload File to Google Drive Using Lightning Component

We have covered many points in lightning, but integration is the one we never touch. So today we will do Integration with google drive and upload file.

First we need to create oAuth app in google developer console https://console.developers.google.com/     

Now after the connect app is created. You will get the Client ID , Client secret. Store them for future reference. You can update the callback URL once we create tab for our component.

Next we need to create Remote Site setting.

After that Just add the below code in your org.


<aura:component controller="GoogleDriveController" implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="accessToken" type="String" />
    <aura:attribute name="myRecordId" type="String" default="0016F0000XXXXXXXXX" description="This is the record where we will temproary store the file"/>
    <lightning:card title="Google Drive Demo">
    	<lightning:button variant="brand" label="Google Drive Auth" title="Google Drive Auth" onclick="{! c.doAuth }" />
        <p class="slds-p-horizontal_small">
            <!--file upload part -->
            <lightning:fileUpload label="upload file to Drive" name="fileUploader"
				multiple="false" accept=".jpg, .png" recordId="{!v.myRecordId}" onuploadfinished="{!c.handleFilesChange}" />


	doInit : function(component, event, helper) {
        var code = component.get("v.pageReference").state.code;
        if(code != undefined) {
            var action  = component.get("c.getAccessToken");
                "code" : code
        	action.setCallback(this, function(response){
            var status = response.getState();
            if(status === "SUCCESS"){
                var accessToken = response.getReturnValue();
                component.set("v.accessToken", accessToken);
    doAuth : function(component, event, helper) {

		var action  = component.get("c.createAuthURL");
        action.setCallback(this, function(response){
            var status = response.getState();
            if(status === "SUCCESS"){
                var authUrl = response.getReturnValue();
                window.location.href = response.getReturnValue();
				//if you want to use standard method use below code. But it will open in new tab.
               /* var urlEvent = $A.get("e.force:navigateToURL");
                  "url": authUrl
    handleFilesChange : function(component, event, helper) {
        var uploadedFiles = event.getParam("files");
        var attachmentId = uploadedFiles[0].documentId;
        var code = component.get("v.accessToken");
        var action  = component.get("c.uploadFile");
            "attachmentId": attachmentId,
            "accessToken" : code
        action.setCallback(this, function(response){
            var status = response.getState();
            if(status === "SUCCESS"){
                var responseCode = response.getReturnValue();
                if(responseCode == '200')
                    alert('File Uploaded successfully');
                    alert('There was some error');


public class GoogleDriveController
    private static String key = 'XXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com';
    private Static String secert = 'XXXXXXXXXXXXXXXXXXXXXXX';
    private Static string redirect_uri = 'https://XXXXXXXXXXXXXXXXXXXXXXXX/lightning/n/GDrive_Demo';
    public static String createAuthURL() {
        String key = EncodingUtil.urlEncode(key,'UTF-8');
        String uri = EncodingUtil.urlEncode(redirect_uri,'UTF-8');
        String authuri = '';
        authuri = 'https://accounts.google.com/o/oauth2/auth?'+
        return authuri;
    public static String getAccessToken(String code)
        //Getting access token from google
        HttpRequest req = new HttpRequest();
        req.setHeader('content-type', 'application/x-www-form-urlencoded');
        String messageBody = 'code='+code+'&client_id='+key+'&client_secret='+secert+'&redirect_uri='+redirect_uri+'&grant_type=authorization_code';
        req.setHeader('Content-length', String.valueOf(messageBody.length()));

        Http h = new Http();
        String resp;
        HttpResponse res = h.send(req);
        resp = res.getBody();
         Map<String,object> responseMap =(Map<String,object>)JSON.deserializeUntyped(res.getBody()) ;  
          String token =  String.valueOf(responseMap.get('access_token'));
         return token;

    public static String uploadFile(String attachmentId, String accessToken) {
        List<ContentVersion> cvFile = [SELECT VersionData,FileType,ContentDocumentId FROM ContentVersion WHERE ContentDocumentId =: attachmentId];
        Blob myBlob = cvFile[0].VersionData;
       String url = 'https://www.googleapis.com/upload/drive/v2/files?uploadType=media';
       string authorizationHeader = 'Bearer ' + accessToken; 
       Integer contentSize = myBlob.size();
       HttpRequest req = new HttpRequest();
       Http h = new Http(); 
       Httpresponse resp = h.send(req);
	   //After file was successfully upload we delete the file
       delete new ContentDocument(Id = cvFile[0].ContentDocumentId);
       return String.valueOf(resp.getStatuscode());

Here we are using lightning:fileUpload to upload file on google drive. This is how our final outcome will look.

Do you like the post or want to add anything. Let me know in comments section.

Happy programming 🙂


2 thoughts on “Upload File to Google Drive Using Lightning Component

  1. it’s not working sir ( component.get(“v.pageReference”).state.code; )
    Error : [Cannot read property ‘state’ of undefined]

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 )

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.