Can Syncfusion Integrate with External Storage Solutions Like AWS or Google Cloud?

[James Edision]

Hello Syncfusion Community,

I hope everyone is doing well. I’m currently working on a project that requires integration with external storage solutions such as AWS S3 and Google Cloud Storage. I’m curious to know if Syncfusion offers any built-in support or tools to facilitate this type of integration. Specifically, I’m looking to understand how Syncfusion components can be used to interact with cloud storage services for tasks such as uploading, retrieving, or managing files.

If anyone has experience with integrating Syncfusion into cloud storage workflows or knows of any resources that detail the setup process, I’d like to hear about it. Any advice, tutorials, or shared experiences would be greatly appreciated.

Thank you in advance for your help!

[SureshRajan Alagarsamy]

Hi Timur,

We have reviewed your query and understand that you are looking to utilize the Amazon S3 File Provider and Google Drive File Provider along with the Syncfusion JavaScript components. We would like to inform you that Syncfusion offers File Manager component which supports multiple file system providers, allowing you to manage files and folders in both physical and cloud-based file systems. The File Manager provides methods for performing various file operations, such as creating new folders, copying and moving files or folders, deleting, uploading, and downloading files or folders.

Follow the below steps to implement the JavaScript
FileManager component with the Google Drive File Provider.

Step 1 : To get started, clone the google-drive-file-provider using the following GitHub location.

GitHub location:
https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider

Step 2 : Generate the client_secret JSON from Google Authorization Server.

To generate a client secret for a Google API, you will need to create a project in the Google Developer Console and enable the API you want to use. Once you have done that, you can create credentials for your project by following these steps:

1. Go to the Google Developer Console. Create and select the project you want to use.
   Google Developer Console : https://console.developers.google.com/
2. In the sidebar on the left, click "Credentials" and then click the "Create credentials". In that, select "OAuth client ID".
3. Select the application type that you want to use (e.g. "Web application") and provide a name for your credentials.
4. In the "Authorized redirect URIs" field, enter the URL where you want to receive the authorization code from the Google Authorization Server.
5. Click "Create" to generate your OAuth client ID and client secret.
6. Click the download icon (the arrow pointing downwards) next to the client ID to download a JSON file containing your credentials. This JSON file will include your client secret as well as other information about your credentials.

You can use the client secret in the JSON file to authenticate your API requests to the Google Authorization Server. It is important to keep your client secret private and secure, as anyone with access to it can use it to access the API on your behalf.

Step 3 : After generating the client secret data, copy the JSON data to the following specified JSON files in the cloned location.

              

1. EJ2GoogleDriveFileProvider > credentials > client_secret.json
2. GoogleOAuth2.0Base > credentials > client_secret.json

Step 4 : After updating the credentials, just build and run the project. Now, the project will be hosted in http://localhost:{port}, and it will ask to log on to the Gmail account for which created the client secret credentials.

Step 5 : Then, provide permission to access the Google Drive files by clicking the allow access button in the page.

Step 6 : Now, just mapping the “ajaxSettings” property of the File Manager component to the appropriate controller methods will allow to manage the files from the Google Drive.

[index.js]

 

var hostUrl = 'http://localhost:{port}/';

var fileObject = new ej.filemanager.FileManager({

  ajaxSettings: {

    url: hostUrl + 'api/GoogleDriveProvider/GoogleDriveFileOperations',

    getImageUrl: hostUrl + 'api/ GoogleDriveProvider/GoogleDriveGetImage',

    uploadUrl: hostUrl + 'api/GoogleDriveProvider/GoogleDriveUpload',

    downloadUrl: hostUrl + 'api/GoogleDriveProvider/GoogleDriveDownload'

  },

});

 

Also, we have attached the documentation step to implement the JavaScript FileManager component with the Google Drive File provider for your reference.

Documentation : https://ej2.syncfusion.com/javascript/documentation/file-manager/file-system-provider#google-drive-file-system-provider

We have also attached a sample for your reference.

JavaScript File Manager : https://stackblitz.com/edit/7ejwxx-cxgera?file=index.js

Following the below steps to implement the JavaScript  FileManager component with the Amazon S3 File Provider.

Step 1: To get started, clone the Amazon file provider using the following GitHub location.

GitHub location: https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider

Step 2: After cloning, open the project in Visual Studio and restore the NuGet packages. Now you need to register Amazon S3 client account details, like the below code snippet.

[AmazonS3ProviderController.cs]

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

Step 3: After registering the Amazon client account details, just build and run the project. Now, the project will be hosted at “http://localhost:{port}” and just map the hosted URL in “ajaxsettings”

properties of the File Manager component to the appropriate controller methods. Refer to the below code snippet for client-side changes.

[index.js]

 

var hostUrl = 'http://localhost:{port}/';

var fileObject = new ej.filemanager.FileManager({

  ajaxSettings: {

    url: hostUrl + 'api/AmazonS3Provider/AmazonS3FileOperations',

    getImageUrl: hostUrl + 'api/AmazonS3Provider/AmazonS3GetImage',

    uploadUrl: hostUrl + 'api/AmazonS3Provider/AmazonS3Upload',

    downloadUrl: hostUrl + 'api/AmazonS3Provider/AmazonS3Download'

  },

});

 

We have also attached a sample for your reference.

Sample : https://stackblitz.com/edit/b7oaee-fhqivv?file=index.js

Also, we have attached the documentation and demo for your reference.

Documentation: https://ej2.syncfusion.com/javascript/documentation/file-manager/file-system-provider#aspnet-core-amazon-s3-cloud-file-provider

Additionally we would like to inform you that the file manager component is used to browse, manage, and organize the files and folders in a file system through a web application. All basic file operations like creating a new folder, uploading and downloading of files in the file system, and deleting and renaming of existing files and folders are available in the file manager component. Additionally, previewing of image files is also provided in the file manager component.

Documentation : https://ej2.syncfusion.com/javascript/documentation/file-manager/file-operations

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.