Contact Support
Save PDF file to Box cloud file storage
9 Aug 20237 minutes to read
To save a PDF file to Box cloud file storage, you can follow the steps below
Step 1 Set up a Box developer account and create a Box application
To access Box storage programmatically, you’ll need a developer account with Box. Go to the Box Developer Console, sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports OAuth 2.0 authentication
for this purpose.
Step 2: Create a PDF Viewer sample in Angular
Follow the instructions provided in this link to create a simple PDF Viewer sample in Angular. This will set up the basic structure of your PDF Viewer application.
Step 3: Modify the PdfViewerController.cs
File in the Web Service Project
-
Create a web service project in .NET Core 3.0 or above. You can refer to this link for instructions on how to create a web service project.
-
Open the
PdfViewerController.cs
file in your web service project. -
Import the required namespaces at the top of the file:
using Box.V2;
using Box.V2.Auth;
using Box.V2.Config;
using Box.V2.Models;
- Add the following private fields and constructor parameters to the
PdfViewerController
class, In the constructor, assign the values from the configuration to the corresponding fields
private IConfiguration _configuration;
public readonly string _accessToken;
public readonly string _clientID;
public readonly string _clientSecret;
public readonly string _folderID;
public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
_hostingEnvironment = hostingEnvironment;
_cache = cache;
_configuration = configuration;
_accessToken = _configuration.GetValue<string>("AccessToken");
_clientID = _configuration.GetValue<string>("ClientID");
_clientSecret = _configuration.GetValue<string>("ClientSecret");
_folderID = _configuration.GetValue<string>("FolderID");
}
- Modify the
Download()
method to save the downloaded PDF files to Box cloud file storage bucket
[HttpPost("Download")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/Download")]
//Post action for downloading the PDF documents
public async Task<IActionResult> Download([FromBody] Dictionary<string, string> jsonObject)
{
//Initialize the PDF Viewer object with memory cache object
PdfRenderer pdfviewer = new PdfRenderer(_cache);
string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]);
string documentId = jsonObject["documentId"];
string result = Path.GetFileNameWithoutExtension(documentId);
string fileName = result + "_downloaded.pdf";
// Initialize the Box API client with your authentication credentials
var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
var client = new BoxClient(config, auth);
var fileRequest = new BoxFileRequest
{
Name = fileName,
Parent = new BoxFolderRequest { Id = _folderID },
};
using (var stream = new MemoryStream(documentBytes))
{
var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
}
return Content(documentBase);
}
- Open the
appsettings.json
file in your web service project, Add the following lines below the existing"AllowedHosts"
configuration
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"AccessToken": "Your_Box_Storage_Access_Token",
"FolderID": "Your_Folder_ID",
"ClientID": "Your_Box_Storage_ClientID",
"ClientSecret": "Your_Box_Storage_ClientSecret"
}
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.
Step 4: Set the PDF Viewer Properties in Angular PDF viewer component
Modify the serviceUrl
property of the PDF viewer component with the accurate URL of your web service project, replacing https://localhost:44396/pdfviewer
with the actual URL of your server. Set the documentPath
property of the PDF viewer component to the desired name of the PDF file you wish to load from Box cloud file storage. Ensure that you correctly pass the document name from the files available in your box folder to the documentPath property.
import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, AnnotationService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-container',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[serviceUrl]='service'
[documentPath]='documentPath'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
ToolbarService, NavigationService, AnnotationService, TextSearchService,
TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
})
export class AppComponent implements OnInit {
// Replace the "localhost:44396" with the actual URL of your server
public service = 'https://localhost:44396/pdfviewer';
public documentPath = 'PDF_Succinctly.pdf';
}
NOTE
The Box.V2.Core NuGet package must be installed in your application to use the previous code example.
NOTE
Replace
PDF_Succinctly.pdf
with the actual document name that you want to load from Box cloud file storage. Make sure to pass the document name from the box folder to thedocumentPath
property of the PDF viewer component