diff --git a/blazor/file-manager/amazon-S3-cloud-file-provider.md b/blazor/file-manager/amazon-S3-cloud-file-provider.md index cca74a416e..6c04a7a1dc 100644 --- a/blazor/file-manager/amazon-S3-cloud-file-provider.md +++ b/blazor/file-manager/amazon-S3-cloud-file-provider.md @@ -9,18 +9,47 @@ 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 the users to access and manage a server hosted file system as collection of objects stored in the Amazon S3 Bucket. To get started, clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider) using the following command + +## 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/ej2-amazon-s3-aspcore-file-provider) using the following command, + +```bash git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider.git ej2-amazon-s3-aspcore-file-provider.git ``` +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 and to perform file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `AmazonS3ProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). + + +## Registering S3 Credentials in the Provider + After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details like **bucketName**, **awsAccessKeyId**, **awsSecretAccessKeyId** and **awsRegion** details in **RegisterAmazonS3** method in the `AmazonS3ProviderController.cs` file to perform the file operations. ```csharp @@ -29,7 +58,12 @@ this.operation.RegisterAmazonS3("<---bucketName--->", "<---awsAccessKeyId--->", ``` -After registering the Amazon client account details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just 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 allows to manage the Amazon ***S3*** (*Simple Storage Service*) bucket's objects storage. + +## 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 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 AmazonS3Provider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage objects in your S3 bucket. ```cshtml @@ -49,6 +83,17 @@ After registering the Amazon client account details, just build and run the proj 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, you need to initialize the Amazon S3 cloud file provider in the controller. -To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `AmazonS3ProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub 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 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 bbf79552de..4d97bf8143 100644 --- a/blazor/file-manager/azure-cloud-file-system-provider.md +++ b/blazor/file-manager/azure-cloud-file-system-provider.md @@ -9,17 +9,45 @@ 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 and add a subfolder to manage files and directories through the File Manager. + +## Introduction to Azure Blob Storage -The Azure file system provider allows the users to access and manage the blobs in the Azure blob storage. To get started, clone the [Azure File Provider](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider) using the following command. +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/ej2-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 ``` -After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, you need to register the Azure storage by passing details like **accountName**, **accountKey**, and **blobName** to the `RegisterAzure` method in the `AzureProviderController.cs` file. +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 new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `AzureProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs). + + +## Registering Azure Credentials in the Provider + +After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register the Azure storage by passing details like **accountName**, **accountKey**, and **blobName** to the `RegisterAzure` method in the `AzureProviderController.cs` file. ```csharp @@ -27,7 +55,7 @@ this.operation.RegisterAzure("<--accountName-->", "<--accountKey-->", "<--blobNa ``` -Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters in the `SetBlobContainer` method as shown below. +Set the blob container and the root blob directory by passing the corresponding URLs as parameters in the `SetBlobContainer` method as shown below. ```csharp @@ -56,7 +84,12 @@ public AzureProviderController(IHostingEnvironment hostingEnvironment) ``` -After setting the blob container references, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just 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 allows to manage the Azure blob storage. + +## 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 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. ```cshtml @@ -74,18 +107,18 @@ After setting the blob container references, just build and run the project. Now ``` -N> **NuGet:** Additionally, a [NuGet](https://www.nuget.org/packages/Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core) package of **ASP.NET Core Azure file system provider** has been created. - -Use the following command to install the NuGet package in an application. - -``` +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, you need to initialize the Azure cloud provider in the controller. - dotnet add package Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core + +## Supported File Operations -``` +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, you need to 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 new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `AzureProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub 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 file actions that can be performed with Azure cloud file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider#key-features) \ No newline at end of file