Save PDF files to Google Drive in Blazor SfPdfViewer Component

17 Jul 20266 minutes to read

Use the following steps to download the currently loaded PDF from the viewer and upload it to a specified Google Drive folder.

Step 1: Set up the Google Drive API

Create a project in Google Cloud Console and enable the Google Drive API. Obtain the OAuth 2.0 Client ID credentials to access the API. For detailed instructions, see Enable the Google Drive API.

Step 2: Create a simple SfPdfViewer sample in Blazor

Follow the Getting Started guide to create a basic Blazor application with the SfPdfViewer component.

Step 3: Install the Google.Apis.Drive.v3 NuGet package in the application to use the Google Drive client.

Step 4: Include the following namespaces at the top of the Index.razor file.

@using Google.Apis.Drive.v3;
@using Google.Apis.Auth.OAuth2;
@using Google.Apis.Services;
@using Google.Apis.Util.Store;
@using System.IO;
@using System.Collections.Generic;
@using System.Threading;
@using System.Threading.Tasks;
@using Microsoft.AspNetCore.Components.Web;
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;

Step 5: Add the following example to save the downloaded PDF file to Google Drive.
File to Google D

@page "/"
<SfButton @onclick="OnClick">Save file to google drive</SfButton>

<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="@viewer"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; }
    private SfPdfViewer2 viewer;
    private readonly string FolderId = "Your Google Drive Folder ID";
    private readonly string CredentialPath = "Your Path to the OAuth 2.0 Client IDs json file";
    private readonly string ApplicationName = "Your Application name";
    private readonly string FileName = "File Name to be loaded into Syncfusion SfPdfViewer";
    private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly };

    private async Task OnClick(MouseEventArgs args)
    {
        byte[] data = await viewer.GetDocumentAsync();
        string result = Path.GetFileNameWithoutExtension(FileName);
        string fileName = result + "_downloaded.pdf";
        UserCredential credential;

        using (var memStream = new FileStream(CredentialPath, FileMode.Open, FileAccess.Read))
        {
            string credPath = "token.json";
            credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
            GoogleClientSecrets.Load(memStream).Secrets,
            Scopes,
            "user",
             CancellationToken.None,
            new FileDataStore(credPath, true));
        }

        // Create the Drive API service.
        var service = new DriveService(new BaseClientService.Initializer()
            {
                HttpClientInitializer = credential,
                ApplicationName = ApplicationName,
            });

        var fileMetadata = new Google.Apis.Drive.v3.Data.File()
            {
                Name = fileName,
                Parents = new List<string> { FolderId }
            };

        FilesResource.CreateMediaUpload request;

        using (var stream = new MemoryStream(data))
        {
            request = service.Files.Create(fileMetadata, stream, "application/pdf");
            request.Fields = "id";
            object value = await request.UploadAsync();
        }
    }
}

NOTE

  • Replace Your Google Drive Folder ID with your actual Google Drive folder ID, Your Application name with the actual application name, File Name to be loaded into Syncfusion® SfPdfViewer with the file to load into the viewer, and Your Path to the OAuth 2.0 Client IDs JSON file with the path to the downloaded OAuth 2.0 Client IDs JSON file.
  • The FolderId is the unique identifier found in the folder URL. For example, for https://drive.google.com/drive/folders/abc123xyz456, the folder ID is abc123xyz456.

View the sample on GitHub

See also