File Management Module

Introduction

ABP Commercial provides the file management module that can be used to upload, download, and organize files in a folder structure. The framework provides an abstraction to work with BLOBs and provides some pre-built storage providers that you can easily integrate to.

It also supports multi-tenancy, and for each tenant, you can set the total size limit.

The file management module uses the BLOB Storing system, so it can use different storage providers to store the file contents. You can easily change your BLOB storage without changing application code.

If you want to create reusable application modules, you don't need to make assumption about how the BLOBs are stored.

You can easily integrate to your favorite BLOB storage provides with a few lines of configuration.

In this article HireTechTeam ABP developer shows how to integrate the module into an ABP commercial Angular application.

Getting started

Installing the ABP File management module

First need to install file management module .

Go to your Application.csproj to install this module

abp add-module Volo.FileManagement by using this command in command prompt .

Then below code will automatically get added in the .Application.csproj file

<PackageReference Include="Volo.FileManagement.Application" Version="x.x.x" />

Then in the ApplicationModule below code is automatically added

 [DependsOn(  //...  typeof(FileManagementApplicationModule))] 

Next step is to go to DbContext file of EntityFrameworkCore.cs file and add the below code

builder.ConfigureFileManagement(); 

Then, Add IFileManagementDbContext to DbContext and add DbSet

 public DbSet<DirectoryDescriptor>DirectoryDescriptions { get; set; } 
    public DbSet<FileDescriptor>FileDescriptions { get; set; }  

Lastly, Add-Migration for file management

Preparing the angular project to use and store File management

After that install @volo/abp.ng.file-management in angular i.e

Yarn add @volo/abp.ng.file-management

Add setting for blob container in module

 Configure<AbpBlobStoringOptions>(options 
        =>{ options.Containers.Configure<FileManagementContainer>(c 
        => { c.UseDatabase(); // You can use FileSystem or Azure providers 
        also. });});

Add API reference in appsettings in webgateway and internal gateway

{ 
        "DownstreamPathTemplate": "/api/file-management/{everything}", 
        "DownstreamScheme": "https", 
        "DownstreamHostAndPorts": [ 
         { 
          "Host": "localhost", 
          "Port": 44367 
         } 
        ], 
        "UpstreamPathTemplate": "/api/file-management/{everything}", 
        "UpstreamHttpMethod": [ "Put", "Delete", "Get", "Post" ] 
       } 

Next you need to Add path inroute.provider.ts file in angular

{ 
        path: '/file-management', 
        name: 'FileManagement::Menu:FileManagement' , 
        layout: eLayoutType.application , 
        parentName: 'AbpUiNavigation::Menu:Administration' , 
        order: 6, 
        requiredPolicy: 'FileManagement.DirectoryDescriptor' , 
      },

Add path reference in app-routing.module.ts

{ 
        path: 'file-management', 
        loadChildren: () => 
        import('@volo/abp.ng.file-management').then(m => 
        m.FileManagementModule.forLazy() 
        ), 
      },

Next step is to import module in app.module.ts file in app

FileManagementConfigModule.forRoot(),

This results in adding the File management view as shown in the figure below. This view provides the features for List, view all folder structure and files.

It enables uploading any type of files and offers a thumbnail preview of the files.

Conclusion

ABP commercials File management module is easy to integrate into the application and provides useful features for managing files on the BLOB storage.