We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to connect File Manager to Spreadsheet component

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


14 Replies

SS Sivakumar ShunmugaSundaram Syncfusion Team October 11, 2022 04:27 AM

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 ViewerDocumentEditor, 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



HA Hamza October 11, 2022 12:39 PM

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.



SS Sivakumar ShunmugaSundaram Syncfusion Team October 12, 2022 06:15 AM

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



HA Hamza October 13, 2022 12:39 PM

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



HA Hamza October 16, 2022 10:29 PM

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



SS Sivakumar ShunmugaSundaram Syncfusion Team October 17, 2022 12:14 PM

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




HA Hamza October 17, 2022 09:25 PM

Sounds good, thanks.



SS Sivakumar ShunmugaSundaram Syncfusion Team October 18, 2022 08:22 AM

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



HA Hamza October 19, 2022 06:22 PM

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)



SS Sivakumar ShunmugaSundaram Syncfusion Team October 20, 2022 08:48 AM

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



HA Hamza October 25, 2022 07:33 PM

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!





SS Sivakumar ShunmugaSundaram Syncfusion Team October 31, 2022 09:10 AM

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



HA Hamza October 31, 2022 09:22 PM

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



NA Nivetha Anandan Syncfusion Team November 2, 2022 06:16 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon