Angular Filemanager using syncfusion sdk

Question

I'm working on a project in which the client requires me to integrate a file manager on to the site(Angular). I have a .net core api. I want to integrate this filemanager. They have resources on how to do it in TS and HTML and CSS but they don't have any details on backend part. Can anyone tell me how to do it?

Answer 1

With the shared details, we understand that you want to know the implementation steps of the Angular File Manager component with the ASP.NET Core file service provider. In our demo site, due to credential security purposes, we have mapped the hosted service provider link in the File Manager ajaxSettings by hosting the ASP.NET Core file provider with credentials. For your reference, we have attached the ASP.NET Core provider and File Manager sample as a zip folder.

Follow the below steps to implement the Angular File Manager component with the ASP.NET Core file provider.

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

GitHub Location : https://github.com/SyncfusionExamples/ej2-aspcore-file-provider

Step 2 : After cloning, open the project in Visual Studio and restore the NuGet packages. Now, you need to set the root directory of the Physical File System in the File Manager controller.

Step 3 : Just build and run the project. Now, the project will be hosted at “http://localhost:{port}” and just map the ajaxSettings property of the File Manager component with appropriate controller methods of the Physical file system.

export class AppComponent {
      public hostUrl: string = 'http://localhost:62869/';
      public ngOnInit(): void {
          this.ajaxSettings = {
              url: this.hostUrl + 'api/FileManager/FileOperations',
              getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
              uploadUrl: this.hostUrl + 'api/FileManager/Upload',
              downloadUrl: this.hostUrl + 'api/FileManager/Download'
          };
         }
    }

Sample : https://stackblitz.com/edit/angular-bxqcdr?file=src%2Fapp.component.ts

Also, we have attached the documentation for your reference.

Documentation : https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started https://blazor.syncfusion.com/documentation/file-manager/file-system-provider#aspnet-core-file-system-provider

Demo : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/file-manager/overview