Amazon S3 cloud file provider

9 Mar 20264 minutes to read

Introduction to Amazon S3

Amazon Simple Storage Service (Amazon S3) is AWS’s object storage service for storing and retrieving any amount of data. S3 is durable, scalable, and pay‑as‑you‑go. In this guide the Syncfusion Blazor File Manager connects to S3 through an ASP.NET Core backend so you can securely browse and perform file operations in the File Manager component.

Prerequisites

Before you integrate Amazon S3 with the Syncfusion Blazor File Manager, ensure you have:

• An AWS Account
• A configured S3 Bucket
• AWS credentials: awsAccessKeyId, awsSecretAccessKeyId, bucketRegion, awsRegion.

Setting Up Amazon S3

• Open the AWS Management Console guide and log into AWS Console -> Navigate to S3.
• Proceed by clicking Create Bucket. A bucket is a container for objects. An object is a file and any metadata that describes that file. The Amazon S3 provider requires a top-level root folder in your bucket to place all required files and subfolders inside this root. Click this link for more details.
• Provide a DNS-compliant bucket name. Click this link for more details.
• Choose the AWS region. Click this link for more details.

Backend Setup

Clone the Amazon S3 File Provider using the following command,

git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider ej2-amazon-s3-aspcore-file-provider

NOTE

This Amazon S3 provider for the Syncfusion Blazor File Manager is intended for demonstration and evaluation only. Before using it consult your security team and complete a security review.

To initialize a local service with the above-mentioned file operations, create a folder named Controllers in the server project. Then, create a .cs file in the Controllers folder and add the required file operation code from AmazonS3ProviderController.cs. You can also find the method-level details for this provider in the same repository.

Registering S3 Credentials in the Provider

After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register the Amazon S3 client details (for example, bucketName, awsAccessKeyId, awsSecretAccessKeyId, and awsRegion) in the RegisterAmazonS3 method in the AmazonS3ProviderController.cs file.

this.operation.RegisterAmazonS3("<---bucketName--->", "<---awsAccessKeyId--->", "<---awsSecretAccessKey--->", "<---region--->");

Configuring Syncfusion File Manager UI

To configure File Manager component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install Syncfusion.Blazor.FileManager and Syncfusion.Blazor.Themes. Integrate the FileManager component by pasting the below code in your .razor file of the Blazor application. Click this link for more details.

Now, build and run the Amazon File Service provider project. It will be hosted at http://localhost:{port}. Map the FileManagerAjaxSettings of the File Manager component to the AmazonS3Provider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage objects in your S3 bucket.

@*Initializing File Manager with Amazon service*@

@* Replace the hosted port number in the place of "{port}" *@

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="http://localhost:{port}/api/AmazonS3Provider/AmazonS3FileOperations"
                             UploadUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3Upload"
                             DownloadUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3Download"
                             GetImageUrl="http://localhost:{port}/api/AmazonS3Provider/AmazonS3GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion^® Blazor File Manager component using the Amazon S3 cloud file provider, initialize the Amazon S3 cloud file provider in the controller.

Supported File Operations

We have enabled below list of features that can be performed using Amazon File Service provider,

Operation	Function
Upload	Directory upload Sequential upload Chunk upload Auto upload Drag and drop upload
Access Control	Setting rules to files/folders Supported rules

Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. To access the live Amazon S3 File Provider demo refer to this link

NOTE

To learn more about the file actions that can be performed with Amazon S3 Cloud File provider, refer to this link