diff --git a/blazor/file-manager/amazon-S3-cloud-file-provider.md b/blazor/file-manager/amazon-S3-cloud-file-provider.md index 451a8a0434..74362f6f93 100644 --- a/blazor/file-manager/amazon-S3-cloud-file-provider.md +++ b/blazor/file-manager/amazon-S3-cloud-file-provider.md @@ -9,23 +9,51 @@ documentation: ug # Amazon S3 cloud file provider -To get started with the Amazon S3 cloud file provider, ensure that you have an active Amazon Web Services (AWS) account and an S3 bucket created in the required AWS Region. You will also need the `AWS Access Key ID`, `Secret Access Key`, `bucket name`, and the `bucket region` to connect the File Manager to the S3 storage. +## Introduction to Amazon S3 -To learn more about creating and configuring an Amazon S3 bucket, refer to this [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-buckets-s3.html). +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. -The Amazon **S3** (Simple Storage Service) cloud file provider allows users to access and manage a server-hosted file system as a collection of objects stored in an Amazon S3 bucket. To get started, clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider): +## 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 + +### Create an S3 Bucket + + - Open the [AWS Management Console guide](https://docs.aws.amazon.com/awsconsolehelpdocs/) 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-buckets-s3.html) for more details. + - Provide a DNS-compliant bucket name. Click this [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) for more details. + - Choose the AWS region. Click this [link](https://docs.aws.amazon.com/general/latest/gr/s3.html) for more details. + +## Backend Setup + +Clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider) using the following command, ```bash git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider ej2-amazon-s3-aspcore-file-provider ``` +N> 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](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/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. ```csharp this.operation.RegisterAmazonS3("<---bucketName--->", "<---awsAccessKeyId--->", "<---awsSecretAccessKey--->", "<---region--->"); ``` -After registering the Amazon client account details, build and run the project. The project will be hosted at `http://localhost:{port}`. By mapping the [FileManagerAjaxSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html) property of the File Manager component to the appropriate controller methods, you can manage the Amazon S3 bucket objects. +## 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](https://blazor.syncfusion.com/documentation/file-manager/getting-started-with-web-app) for more details. + +Now, build and run the Amazon File Service provider project. It will be hosted at `http://localhost:{port}`. Map the [FileManagerAjaxSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html) of the File Manager component to the AmazonS3Provider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage objects in your S3 bucket. ```razor @*Initializing File Manager with Amazon service*@ @@ -43,6 +71,15 @@ After registering the Amazon client account details, build and run the project. 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. -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](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). You can also find the method-level details for this provider in the same repository. +## Supported File Operations + +We have enabled below list of features that can be performed using Amazon File Service provider, + +|Operation | Function | +|---|---| +| Upload | | +| Access Control | | + +Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. -N> To learn more about the file actions supported by the Amazon S3 cloud file provider, refer to the [key features](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider#key-features). \ No newline at end of file +N> To learn more about the file actions that can be performed with Amazon S3 Cloud File provider, refer to this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider#key-features) \ No newline at end of file diff --git a/blazor/file-manager/azure-cloud-file-system-provider.md b/blazor/file-manager/azure-cloud-file-system-provider.md index 212a8f863d..637bc986da 100644 --- a/blazor/file-manager/azure-cloud-file-system-provider.md +++ b/blazor/file-manager/azure-cloud-file-system-provider.md @@ -9,14 +9,37 @@ documentation: ug # Azure cloud file system provider -To get started with the Azure cloud file system provider, ensure you have an active Microsoft Azure account with a configured Blob Storage service. [Create a Blob Storage container](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) and add a subfolder to manage files and directories through the File Manager. +## Introduction to Azure Blob Storage -The Azure file system provider allows users to access and manage blobs in Azure Blob Storage. To get started, clone the [Azure File Provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider): +Azure Blob Storage is Microsoft Azure's object storage solution for the cloud, optimized for storing massive amounts of unstructured data. In this guide, the Syncfusion Blazor File Manager connects to Blob Storage through an ASP.NET Core backend so you can securely browse and perform file operations in the File Manager component. + +## Prerequisites + +Before you integrate Azure Blob Storage with the Syncfusion Blazor File Manager, ensure you have: +- An active Microsoft Azure subscription +- A Storage Account with Blob service enabled +- A Blob Container and an optional root folder inside that container +- Azure credentials: `accountName`, `accountKey`, and `blobName` + +## Setting Up Azure Blob Storage + +- Sign in to the [Azure Portal](https://portal.azure.com/) and [create a storage account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) with Blob service enabled. +- [Create a Blob Container](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-portal?tabs=azure-portal#create-a-container) (example: files). See Azure docs for [container naming rules](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-introduction#naming-and-referencing-containers-blobs-and-metadata). + +## Backend Setup + +Clone the [Azure File Provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider) using the following command, ```bash git clone https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider ej2-azure-aspcore-file-provider ``` +N> This Azure Blob Storage provider for the Syncfusion Blazor File Manager is intended for demonstration and evaluation only. Before using it in production, 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 [AzureProviderController.cs](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs). You can also find the method-level details for this provider in the same repository. + +## Registering Azure Credentials in the Provider + After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register Azure Storage by passing **accountName**, **accountKey**, and **blobName** to the `RegisterAzure` method in the `AzureProviderController.cs` file. ```csharp @@ -46,9 +69,13 @@ public AzureProviderController(IHostingEnvironment hostingEnvironment) filePath = "https://azure_service_account.blob.core.windows.net/blob/Files"; ... } -``` +``` + +## Configuring Syncfusion File Manager UI -After setting the blob container references, build and run the project. The project will be hosted at `http://localhost:{port}`. By mapping the [FileManagerAjaxSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html) property of the File Manager component to the appropriate controller methods, you can manage the Azure Blob Storage content. +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](https://blazor.syncfusion.com/documentation/file-manager/getting-started-with-web-app) for more details. + +Now, build and run the Azure File Service provider project. It will be hosted in `http://localhost:{port}`. Map the [FileManagerAjaxSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html) of the File Manager component to the AzureProvider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage blobs in your Azure Blob Storage container. ```razor @*Initializing File Manager with Azure service.*@ @@ -64,16 +91,17 @@ After setting the blob container references, build and run the project. The proj ``` -N> **NuGet:** A NuGet package for the **ASP.NET Core Azure file system provider** is available: [Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core). +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 Azure cloud file system provider, initialize the Azure cloud provider in the controller. -Use the following command to install the NuGet package in an application. +## Supported File Operations -```bash -dotnet add package Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core -``` +We have enabled below list of features that can be performed using Azure File Service provider, -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 Azure cloud file system provider, initialize the Azure cloud provider in the controller. +|Operation | Function | +|---|---| +| Upload | | +| Access Control | | -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 [AzureProviderController.cs](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs). You can also find the method-level details for this provider in the same repository. +Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. -N> To learn more about the file actions supported by the Azure cloud file system provider, refer to the [key features](https://github.com/SyncfusionExamples/azure-aspcore-file-provider#key-features). +N> To learn more about the file actions supported by the Azure cloud file system provider, refer to the [key features](https://github.com/SyncfusionExamples/azure-aspcore-file-provider#key-features). \ No newline at end of file