How to connect File Manager to Spreadsheet component

[Hamza]

Hello,

I have the AWS S3 File Manager and Spreadsheet Syncfusion component on my react app on the same page.

Is there a way the code can be modified so I can click on a CSV file (stored in S3) from the file manager and it displays the contents on the spreadsheet component below it?

Components I'm using:

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

https://ej2.syncfusion.com/react/demos/#/material/spreadsheet/default

[Sivakumar ShunmugaSundaram]

Hi Hamza,

Greetings from syncfusion support.

From the shared details, we understand that you want to preview the CSV file (stored in S3) using the spreadsheet component while clicking on the CSV file in the FileManager component. You can integrate the SpreadSheet component with the File Manager to open the required files.

We have previewed pdf, docx, txt, and xlsx files using the PDF Viewer, DocumentEditor, and SpreadSheet components in the below update. In a similar way, you can preview CSV files in File Manager using the SpreadSheet component from your side.

https://www.syncfusion.com/forums/154689/how-to-integrate-pdfviewer-to-preview-pdf-files-on-the-file-explorer-component?reply=NqZPuM

Please check the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Hamza]

This would be nice to do, but unfortunately the requirement is to have the file manager component on top of the spreadsheet component. When a csv file is clicked in the file manager, it would update the spreadsheet component below it with the contents of that csv file. Would that be possible?

Thank you very much.

[Sivakumar ShunmugaSundaram]

Hi Hamza,

From the shared details, we understand that you want to implement the FileManager component on top of the Spreadsheet component. As requested, we have prepared a simple sample of the React FileManager component on top of the Spreadsheet component.

While clicking the file in the FileManager component, the file data will be previewed in the Spreadsheet component. We have attached the prepared sample and the service provider for your reference.

Sample: https://stackblitz.com/edit/react-ndohuq-tvk5h5?file=index.js

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-Service-95435461_(2)-1374274695.zip 

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

Regards,

Sivakumar S

[Hamza]

Hello Sivakumar,

Thanks for the demo, but I noticed you prepared the file manager without AWS S3. Is it possible if you could modify it so that it uses the Amazon S3 provider?

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

Thank you,

Hamza

[Hamza]

Your help on how to connect this to the AWS S3 Provider would be greatly appreciated. Thanks

[Sivakumar ShunmugaSundaram]

Hi Hamza,

We understand that you want to open the CSV file retrieved from the Amazon S3 bucket using the Spreadsheet component. Currently, our internal team checking the feasibility to open the files using the Spreadsheet component by retrieving the file from the Amazon S3 bucket. But we need some additional time and will update you with further details on October 20, 2022.

We appreciate your patience.

Regards,

Sivakumar S

[Hamza]

Sounds good, thanks.

[Sivakumar ShunmugaSundaram]

Hi Hamza,

Thanks for your patience.

As requested, we have prepared a simple sample to open the CSV file retrieved from the Amazon S3 bucket using the Spreadsheet component. While clicking the CSV file in the FileManager component, the file data will be previewed in the Spreadsheet component. We have attached the prepared sample and the service provider for your reference.

Sample:  https://stackblitz.com/edit/react-ndohuq-mt6hqw?file=index.js

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/amazon-s3-aspcore-file-provider2092105218.zip

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

Regards,

Sivakumar S

[Hamza]

Hello,

I tried the demo but when I click on an XLS file it doesn't open anything on the spreadsheet. Also, when I click on a CSV it doesn't open anything either and it gives me this error on the Amazon S3 Provider console:

fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]

An unhandled exception has occurred while executing the request.

Amazon.S3.AmazonS3Exception: The specified key does not exist. ---> Amazon.Runtime.Internal.HttpErrorResponseException: Exception of type 'Amazon.Runtime.Internal.HttpErrorResponseException' was thrown.

 at Amazon.Runtime.HttpWebRequestMessage.GetResponseAsync(CancellationToken cancellationToken) in D:\JenkinsWorkspaces\trebuchet-stage-release\AWSDotNetPublic\sdk\src\Core\Amazon.Runtime\Pipeline\HttpHandler\_mobile\HttpRequestMessageFactory.cs:line 539

at Amazon.Runtime.Internal.HttpHandler`1.InvokeAsync[T](IExecutionContext executionContext) in D:\JenkinsWorkspaces\trebuchet-stage-release\AWSDotNetPublic\sdk\src\Core\Amazon.Runtime\Pipeline\HttpHandler\HttpHandler.cs:line 175

at Amazon.Runtime.Internal.RedirectHandler.InvokeAsync[T](IExecutionContext executionContext)

at Amazon.Runtime.Internal.Unmarshaller.InvokeAsync[T](IExecutionContext executionContext)

at Amazon.S3.Internal.AmazonS3ResponseHandler.InvokeAsync[T](IExecutionContext executionContext)

at Amazon.Runtime.Internal.ErrorHandler.InvokeAsync[T](IExecutionContext executionContext)

--- End of inner exception stack trace ---

at Syncfusion.EJ2.FileManager.AmazonS3FileProvider.AmazonS3FileProvider.GetExcel(String filePath) in /Users/hamzah/Downloads/amazon-s3-aspcore-file-provider 3/Models/AmazonS3FileProvider.cs:line 725

at EJ2AmazonS3ASPCoreFileProvider.Controllers.AmazonS3ProviderController.GetExcel(String filePath) in /Users/hamzah/Downloads/amazon-s3-aspcore-file-provider 3/Controllers/AmazonS3ProviderController.cs:line 133

at lambda_method(Closure , Object , Object[] )

at Microsoft.Extensions.Internal.ObjectMethodExecutor.Execute(Object target, Object[] parameters)

at Microsoft.AspNetCore.Mvc.Internal.ActionMethodExecutor.SyncActionResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)

at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeActionMethodAsync()

at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeNextActionFilterAsync()

at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ActionExecutedContext context)

at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)

at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeInnerFilterAsync()

at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeNextResourceFilter()

at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)

at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)

at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeFilterPipelineAsync()

at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeAsync()

at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)

at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)

at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

[Sivakumar ShunmugaSundaram]

Hi Hamza,

From the shared details, we understand that you are facing an issue with opening the XLS and CSV files using the Spreadsheet component. We have checked the reported issue with a previously shared sample from our side, and the sample works fine from our side. Since we are unable to replicate the reported issue from our side, we would like to confirm whether you are facing any network path issues from your side or else facing any console errors.

We have attached the video footage to demonstrate the behavior of the component.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video1656094646.zip

Please share the simple issue replicated sample with us. It will help us to validate further the reported issue from our side.

Regards,

Sivakumar S

[Hamza]

Hello,

I am still running into the same issue. I believe the issue is because I am setting the bucket folder name from the front-end. For reference, please see the code attached.

Sample: https://stackblitz.com/edit/react-ndohuq-o72hjk?file=index.js

Service Provider: amazons3aspcorefileprovider_3_ca55a677.zip

Thank you!

[Sivakumar ShunmugaSundaram]

Hi Hamza,

Thanks for the shared sample. As per the shared sample, we have checked the reported issue with opening the XLS and CSV files using the Spreadsheet component and we are unable to retrieve the amazon service provider files in the client-side FileManager React application from your shared sample. On our further validation, the reported issue occurs due to setting an incorrect hostUrl in the FileManager client-side service and Spreadsheet open and save URL in the shared sample. From the shared sample also, we are unable to replicate the provider console error from our side.

So, to overcome the issue we suggest you set the proper service provider URL from your side and ensure the amazon credential details which is added to the amazon service provider. We have attached the behavior video footage with your shared sample for your reference. Also, we would like to confirm whether you are setting the subfolder as the FileManager root folder which is retrieved from the amazon bucket from your side.

Refer to the below code snippet.

[index.js],

 

export class Overview extends SampleBase {

    hostUrl = 'http://localhost: 62869/';

 

    ...

    render() {

      return (

        <div>

...

          <SpreadsheetComponent

            openUrl=http://localhost: 62869/api/AmazonS3Provider/OpenExcel

            saveUrl=http://localhost: 62869/api/AmazonS3Provider/SaveExcel

            ref={(ssObj) => {

              this.spreadsheet = ssObj;

            }}

            openComplete={this.onopenComplete.bind(this)}

            select={this.onselect.bind(this)}

          >

...

          </SpreadsheetComponent>

        </div>

      );

    }

  }

 

  const root = createRoot(document.getElementById('sample'));

  root.render(<Overview />);

 

Sample: https://stackblitz.com/edit/react-ndohuq-mwk6jh?file=index.js

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video432722733.zip

Please check the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Hamza]

Please see the attached screen recording to understand my issue better. I do not think the issue is regarding the hosturl, rather I believe I am missing something in my Amazon S3 provider. The file manager works fine, but clicking on XLS and CSV files does not work.

Could you please send me the Amazon S3 provider that you used in the footage you sent?

Thank you.

Attachment: screencapture_(3).webm_41af14af.zip

[Nivetha Anandan]

Hamza, we have created a new support ticket under your account. Please follow that for further assistance.