Save PDF to Box cloud storage in Blazor SfPdfViewer Component

17 Jul 20265 minutes to read

Follow these steps to save a PDF from the SfPdfViewer to Box cloud storage.

Step 1: Set up a Box developer account and create a Box application

To access Box storage programmatically, a Box developer account is required. Open the Box Developer Console and create a Box application. The application provides the Client ID, Client Secret, and an access token (obtained through the OAuth 2.0 flow) used to authenticate with Box APIs. Before accessing files, the application must be authorized using OAuth 2.0.

Step 2: Create a simple SfPdfViewer sample in Blazor

Create a basic Blazor Web App Server application that hosts the SfPdfViewer component by following Getting started with Blazor SfPdfViewer. This provides the baseline configuration required for the viewer.

Step 3: Include the following namespaces in the Index.razor file:

@using System.IO;
@using System.Threading.Tasks;
@using Box.V2;
@using Box.V2.Auth;
@using Box.V2.Config;
@using Box.V2.Models;
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;

Step 4: Add the following code example to save a PDF to Box cloud storage

@page "/"
<SfButton @onclick="OnClick">Save file to Box storage</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="viewer"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "PDF_Succinctly.pdf";
    private readonly string accessToken = "Your Box Storage Access Token";
    private readonly string folderID = "Your Folder ID";
    private readonly string clientID = "Your Box Storage ClientID";
    private readonly string clientSecret = "Your Box Storage ClientSecret";
    private readonly string fileName = "File Name to be loaded into Syncfusion SfPdfViewer";

    private async Task OnClick(MouseEventArgs args)
    {
        // Get the current PDF document from the SfPdfViewer as a byte array.
        byte[] data = await viewer.GetDocumentAsync();
        string result = Path.GetFileNameWithoutExtension(fileName);
        string FileName = result + "_downloaded.pdf";
        // Initialize the Box API client with your authentication credentials.
        // YOUR_REFRESH_TOKEN: refresh token issued by Box. 3600: token lifetime in seconds. "bearer": token type.
        var auth = new OAuthSession(accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
        // "http://boxsdk": placeholder redirect URI registered in the Box app configuration.
        var config = new BoxConfigBuilder(clientID, clientSecret, new Uri("http://boxsdk")).Build();
        var client = new BoxClient(config, auth);

        // BoxFileRequest describes the file metadata (name and parent folder) for the upload.
        var fileRequest = new BoxFileRequest
            {
                Name = FileName,
                Parent = new BoxFolderRequest { Id = folderID },
            };

        using (var stream = new MemoryStream(data))
        {
            var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
        }

    }
}

NOTE

  • replace Your_Box_Storage_Access_Token with your actual box access token, and Your_Folder_ID with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as Your_Box_Storage_ClientID and Your_Box_Storage_ClientSecret are placeholders for your application’s API key and secret.
  • Install the Box.V2.Core NuGet package in the application to use the Box SDK types referenced in the example.
  • If loading a document by name, replace PDF_Succinctly.pdf with the actual file name, and assign it to the DocumentPath property of the SfPdfViewer component. For details, see the DocumentPath property of the SfPdfViewer component.

View sample in GitHub

See also