How to connect S3 bucket to React File Manager

[Rashnek]

Hello,

I am having trouble on finding where I should be adding my bucketName, awsAccessKeyId, awsSecretKeyId and awsRegion details in the React version of the S3 file manager. Any guidance would be greatly appreciated!

This is the demo I am trying to modify:

https://ej2.syncfusion.com/react/demos/#/material/file-manager/AmazonS3Provider

Thanks.

[Sivakumar ShunmugaSundaram]

Hi Rashnek,

Greetings from Syncfusion support.

We understand that you want to implement the React FileManager component with the Amazon S3 file service provider. We have prepared a simple sample of React FileManager with an Amazon S3 file service provider. We have attached the prepared sample and the Amazon S3 file service provider as a zip folder for your reference. To use the Amazon S3 service provider, you need to register the Amazon S3 client account details in the below snippet.

[AmazonS3ProviderController.cs],

 

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

 

 

Also, we have attached the documentation steps to implement the FileManager component with the Amazon S3 file service provider and the provider GitHub location for your reference.

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

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

Sample: https://stackblitz.com/edit/react-3ajdla?file=index.js

Amazon S3 service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/amazon-s3-aspcore-file-provider1126740235.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Rashnek]

Hello, I added my credentials to:

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

Yet I get this error:

[Prasanth Madhaiyan]

Hi Rashnek,

We have validated your reported query in the FileManager with the Amazon S3 file service provider. We suspect that the reported issue occurs because of the incorrect file path, which is that the path is not available in your sample. So, please ensure exactly which bucket you are using at your end.

For example, if your bucket name is FileManager, you need to specify the name in the bucket name and also add the AccessKeyId, SecretAccessKey and region values from your Amazon back-end bucket . The bucket should contain a root folder, and inside that folder, you can include the files and folders that need to be visualized within the File Manager.

So, you need to create a folder similar to this architecture in your back end. After that, you should map that path in the provider. Please try the above shared details at your end and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Rashnek]

Hello,

My bucket looks like this from inside. It is public and has worked with other file manager tools.

I added the bucket details including access and secret access keys here.

public AmazonS3ProviderController(IHostingEnvironment hostingEnvironment)

{

this.basePath = hostingEnvironment.ContentRootPath;

this.operation = new AmazonS3FileProvider();

this.operation.RegisterAmazonS3("my-bucket", "access-key", "secret-access-key", "ca-central-1");

}

Yet it still does not work. I would appreciate some more specific guidance on how this can be fixed.

[Rashnek]

I'd really appreciate any suggestions on how to fix this.

Does my bucket permissions look right? Please see attached.

https://drive.google.com/file/d/19iEf3UIN87nRyEtMyB5o5mrsknbZBkdd/view?usp=sharing

Thank you.

[Sivakumar ShunmugaSundaram]

Hi Rashnek,

We have created a new ticket under your account to follow up with this query. We suggest you follow up with the ticket for further updates. Please log in using the below link.

https://support.syncfusion.com/support

Regards,
Sivakumar S