Save PDF files to Google Drive in Blazor SfPdfViewer

1 Oct 20255 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 necessary 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: Include the following namespaces in the Index.razor file.

  1. Import the required namespaces at the top of the file:
@using Google.Apis.Drive.v3;
@using Google.Apis.Auth.OAuth2;
@using Google.Apis.Services;
@using Google.Apis.Util.Store;
@using System.Threading.Tasks;
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons

Step 4: Add the following example to save the downloaded PDF file to Google Drive.

@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 };

    public async void 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 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 client credentials JSON file.

NOTE

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.

NOTE

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

View the sample on GitHub

See also