In this article I will explain how to display (view) list of files from Google Drive using Google Drive API in ASP.Net with C# and VB.Net and the ASPSnippets.GoogleAPI.
The files will be displayed along with the Thumbnail image and link to download the file.
Getting Google Client ID and Client Secret
In order to use Google Drive API for uploading files to Google Drive, you will need to create an Application in Google Console and get Client ID and Client Secret. For details please refer the following article.
Downloading ASPSnippets.GoogleAPI DLL
You can download the ASPSnippets.GoogleAPI API DLL using the following download link.
HTML Markup
The HTML Markup consist of an ASP.Net DataList control. The ItemTemplate of the DataList control consists of an HTML Table containing some Label controls and an Image control for displaying the details of the uploaded file and the Thumbnail image.
<asp:DataList ID="dlFiles" runat="server" RepeatColumns="2">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<th colspan="2">
<%# Eval("Title") %>
</th>
</tr>
<tr>
<td rowspan="6" style="width: 100px" valign="top">
<a href='<%# Eval("ThumbnailLink") %>' target="_blank">
<img alt="" src='<%# Eval("ThumbnailLink") %>' class="thumbnail" />
</a>
</td>
<tr>
<td style="width: 200px">
<b>File Name:</b>
<%# Eval("OriginalFileName") %>
</td>
</tr>
<tr>
<td>
<b>Created Date:</b>
<%# Convert.ToDateTime(Eval("CreatedDate")).ToString("dd, MMM yyyy") %>
</td>
</tr>
<tr>
<td>
<b>Modified Date:</b>
<%# Convert.ToDateTime(Eval("ModifiedDate")).ToString("dd, MMM yyyy") %>
</td>
</tr>
<tr>
<td>
<b>File Type:</b>
<img alt="" src='<%# Eval("IconLink") %>' />
</td>
</tr>
<tr>
<td>
<a href='<%# Eval("WebContentLink") %>'>Download File</a>
</td>
</tr>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Namespaces
You will need to import the following namespaces.
Note: You will need place the ASPSnippets.GoogleAPI DLL inside the BIN folder of your project and add its reference.
C#
using ASPSnippets.GoogleAPI;
using System.Web.Script.Serialization;
VB.Net
Imports ASPSnippets.GoogleAPI
Imports System.Web.Script.Serialization
Data Class
You will need to create the following class which will be used to hold the Google Drive file details returned from Google API.
The structure of this class is same as that of the JSON string returned from the Google API so that the JSON string can be easily deserialized to its object.
C#
public class GoogleDriveFiles
{
public List<GoogleDriveFile> Items { get; set; }
}
public class GoogleDriveFile
{
public string Id { get; set; }
public string Title { get; set; }
public string OriginalFilename { get; set; }
public string ThumbnailLink { get; set; }
public string IconLink { get; set; }
public string WebContentLink { get; set; }
public DateTime CreatedDate { get; set; }
public DateTime ModifiedDate { get; set; }
public GoogleDriveFileLabel Labels { get; set; }
}
public class GoogleDriveFileLabel
{
public bool Starred { get; set; }
public bool Hidden { get; set; }
public bool Trashed { get; set; }
public bool Restricted { get; set; }
public bool Viewed { get; set; }
}
VB.Net
Public Class GoogleDriveFiles
Public Property Items() As List(Of GoogleDriveFile)
Get
Return m_Items
End Get
Set(value As List(Of GoogleDriveFile))
m_Items = Value
End Set
End Property
Private m_Items As List(Of GoogleDriveFile)
End Class
Public Class GoogleDriveFile
Public Property Id() As String
Get
Return m_Id
End Get
Set(value As String)
m_Id = Value
End Set
End Property
Private m_Id As String
Public Property Title() As String
Get
Return m_Title
End Get
Set(value As String)
m_Title = Value
End Set
End Property
Private m_Title As String
Public Property OriginalFilename() As String
Get
Return m_OriginalFilename
End Get
Set(value As String)
m_OriginalFilename = Value
End Set
End Property
Private m_OriginalFilename As String
Public Property ThumbnailLink() As String
Get
Return m_ThumbnailLink
End Get
Set(value As String)
m_ThumbnailLink = Value
End Set
End Property
Private m_ThumbnailLink As String
Public Property IconLink() As String
Get
Return m_IconLink
End Get
Set(value As String)
m_IconLink = Value
End Set
End Property
Private m_IconLink As String
Public Property WebContentLink() As String
Get
Return m_WebContentLink
End Get
Set(value As String)
m_WebContentLink = Value
End Set
End Property
Private m_WebContentLink As String
Public Property CreatedDate() As DateTime
Get
Return m_CreatedDate
End Get
Set(value As DateTime)
m_CreatedDate = Value
End Set
End Property
Private m_CreatedDate As DateTime
Public Property ModifiedDate() As DateTime
Get
Return m_ModifiedDate
End Get
Set(value As DateTime)
m_ModifiedDate = Value
End Set
End Property
Private m_ModifiedDate As DateTime
Public Property Labels() As GoogleDriveFileLabel
Get
Return m_Labels
End Get
Set(value As GoogleDriveFileLabel)
m_Labels = Value
End Set
End Property
Private m_Labels As GoogleDriveFileLabel
End Class
Public Class GoogleDriveFileLabel
Public Property Starred() As Boolean
Get
Return m_Starred
End Get
Set(value As Boolean)
m_Starred = Value
End Set
End Property
Private m_Starred As Boolean
Public Property Hidden() As Boolean
Get
Return m_Hidden
End Get
Set(value As Boolean)
m_Hidden = Value
End Set
End Property
Private m_Hidden As Boolean
Public Property Trashed() As Boolean
Get
Return m_Trashed
End Get
Set(value As Boolean)
m_Trashed = Value
End Set
End Property
Private m_Trashed As Boolean
Public Property Restricted() As Boolean
Get
Return m_Restricted
End Get
Set(value As Boolean)
m_Restricted = Value
End Set
End Property
Private m_Restricted As Boolean
Public Property Viewed() As Boolean
Get
Return m_Viewed
End Get
Set(value As Boolean)
m_Viewed = Value
End Set
End Property
Private m_Viewed As Boolean
End Class
Uploading the File to Google Drive and displaying the details on page
The very first thing is that you need to set the Client ID and the Client Secret for the GoogleConnect class and you need to set the API as Drive as we need to use the Google Drive API.
The below code looks for access code (access token) in QueryString. If the access code is not found then it redirects user to the authorization page.
For this article I am requesting access to the Google Drive of the user by passing the https://www.googleapis.com/auth/drive.file.readonly scope. User can allow and deny and in both cases he is sent back to the URL set as the RedirectUri while creating the application in Google Developer Console.
After the authorization is completed, the access code fetched from QueryString and is passed to the Fetch function of the GoogleConnect class.
The Fetch function returns the list of Google Drive file as JSON string which is then deserialized to the GoogleDriveFiles class object.
Note: Google Drive API will also return the files present in Trash folder and hence I have filtered out such files using Lambda expression.
C#
protected void Page_Load(object sender, EventArgs e)
{
GoogleConnect.ClientId = "<Google ClientID>";
GoogleConnect.ClientSecret = "<Google Client Secret>";
GoogleConnect.RedirectUri = Request.Url.AbsoluteUri.Split('?')[0];
GoogleConnect.API = EnumAPI.Drive;
if (!string.IsNullOrEmpty(Request.QueryString["code"]))
{
string code = Request.QueryString["code"];
string json = GoogleConnect.Fetch("me", code);
GoogleDriveFiles files = new JavaScriptSerializer().Deserialize<GoogleDriveFiles>(json);
//Remove the deleted files.
dlFiles.DataSource = files.Items.Where(i => i.Labels.Trashed == false);
dlFiles.DataBind();
}
else if (Request.QueryString["error"] == "access_denied")
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Access denied.')", true);
}
else
{
GoogleConnect.Authorize("https://www.googleapis.com/auth/drive.readonly");
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
GoogleConnect.ClientId = ""<Google ClientID>"
GoogleConnect.ClientSecret = "<Google Client Secret>"
GoogleConnect.RedirectUri = Request.Url.AbsoluteUri.Split("?"c)(0)
GoogleConnect.API = EnumAPI.Drive
If Not String.IsNullOrEmpty(Request.QueryString("code")) Then
Dim code As String = Request.QueryString("code")
Dim json As String = GoogleConnect.Fetch("me", code)
Dim files As GoogleDriveFiles = New JavaScriptSerializer().Deserialize(Of GoogleDriveFiles)(json)
'Remove the deleted files.
dlFiles.DataSource = files.Items.Where(Function(i) i.Labels.Trashed = False)
dlFiles.DataBind()
ElseIf Request.QueryString("error") = "access_denied" Then
ClientScript.RegisterClientScriptBlock(Me.[GetType](), "alert", "alert('Access denied.')", True)
Else
GoogleConnect.Authorize("https://www.googleapis.com/auth/drive.readonly")
End If
End Sub
Screenshots
The Google Authorization page
The files from Google Drive being displayed with Thumbnail Image and Download Link
Demo
Downloads