How to Use the ASP.NET MVC File Manager for Local Storage
In a recent blog, we discussed the new ASP. NET File Manager control and how it works seamlessly with Cloud-based storages like Google, Azure, and DropBox. This seamless integration makes it easy to load, delete, move, and download files on cloud locations by setting up cloud connections and providing these connections to File Manager and Cloud Service API.
While cloud storage is the preferred storage for many, some companies prefer to store data on their local servers as they may have specific security needs.
In the latest ComponentOne 2020v2 release, we added Local Storage support for File Manager, so all the possible operations with Cloud storage can be done with local storage.
Here is what the control looks like:
In this blog, we will learn to work with the file manager in the following two steps:
- Setting up the Cloud Service WebAPI
- Setting up the File Manager
Setting up the Cloud Service WebAPI:
The cloud service API provides the files/folder information to be displayed by the file manager. Here are the steps to add and configure the Cloud Service API for Local Storage:
To start with Cloud Service API, we need a project for WebAPI. If there is already a WebAPI in the application, we don't need to create a new one, but if there is no WebAPI project, we will make the Asp. Net Core 3.1 WebApi project using Visual Studio 2019.
Installing the NuGet Package
- To install the Nuget package, right-click on dependencies.
- From the context menu, click on Manage NuGet packages and select the ‘Browse’ tab.
- In the search box, search C1.AspNetCore.Api.Cloud
- Select C1.AspNetCore.Api.Cloud search result and click on Install
Now, the required cloud service API package is installed in the project.
Setup Disk Storage to Access the Target Folder:
First, we need to create a folder in the project to access the wwwroot location to access the files from this location using Cloud API. For reference, we are adding a project named MyFiles. Now, add the files and subfolders at this location if required.
To access this folder using the API link, we need to add the following code to the Startup.cs file’s Configure () method.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
{...
app.UseMvc();
app.UseStorageProviders()
.AddDiskStorage("MyExplorer", Path.Combine(env.WebRootPath, "MyFiles"));
...}
We will add a subfolder named Files as a Container since MyFiles is our root folder.
Now our Cloud API is ready, and it can be accessed using the following URL:
Creating the File Manager Setup:
Once our Cloud Service API is setup, the File Manager is ready to use.
To use the File Manager, the C1.AspNetCore.MVC package should be installed on the project.
To add file manager in the project, go through the following steps:
- Right-click on Dependencies in the Asp. Net Core MVC project
- Select the Manage Nuget package option and select the Browse tab
-
Search for C1.AspNetCore.MVC package
-
Select this package and click on Install
Once the package is installed, open the ~/_ViewImports.cshtml file and add the following code line:
@using C1.Web.Mvc
@using C1.Web.Mvc.Fluent
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, C1.AspNetCore.Mvc
Now, open the ‘~/Shared/_Layout.cshtml’ file and add the following tags in the head section:
<head>
…
<c1-styles />
<c1-scripts />
</head>
Now, we are ready to use the C1FileManager in our project. To add the File Manager, add the following code:
<c1-file-manager id="manager1" host-url="http://localhost:45977" cloud-type="LocalStorage" container-name="ExcelRoot" root-folder="MyExplorer" >
</c1-file-manager>
We have configured the File Manager with Cloud Service and are ready to execute the project. As the project would run, the File Manager would be displayed as follows:
