{"id":32573,"date":"2023-01-27T15:33:54","date_gmt":"2023-01-27T15:33:54","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=32573"},"modified":"2023-01-27T15:33:56","modified_gmt":"2023-01-27T15:33:56","slug":"file-management-for-angular-web-apps","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/file-management-for-angular-web-apps\/","title":{"rendered":"File Management for Angular Web Apps"},"content":{"rendered":"\n<p>Angular file management is essential to web application development. But most people get confused about using the codes and everything. This tutorial will make it easy to implement file management or file explorer components in our web file manager interface. Let&#8217;s continue reading!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"933\" height=\"622\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-9.png\" alt=\"\" class=\"wp-image-32575\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-9.png 933w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-9-300x200.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-9-768x512.png 768w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a><strong>What Are The Features Of An Angular File Explorer?<\/strong><\/h2>\n\n\n\n<p>Features of an angular file explorer component may vary depending on the brand, such as<a href=\"https:\/\/www.filestack.com\/sdks\/angular\/\" target=\"_blank\" rel=\"noopener\"> <\/a><a href=\"https:\/\/www.filestack.com\/sdks\/angular\/\" target=\"_blank\" rel=\"noopener\">Filestack<\/a>. But some common features are listed below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Toolbar<\/strong><\/li>\n\n\n\n<li><strong>Navigation Pane<\/strong><\/li>\n\n\n\n<li><strong>Content Pane<\/strong><\/li>\n\n\n\n<li><strong>Different File Operations<\/strong><ul><li><strong>Sorting<\/strong><\/li><\/ul><ul><li><strong>Searching<\/strong><\/li><\/ul><ul><li><strong>Moving Files and Folders<\/strong><\/li><\/ul><ul><li><strong>Access Control Restriction<\/strong><\/li><\/ul><ul><li><strong>Restrict File Types On Upload<\/strong><\/li><\/ul><ul><li><strong>Multiple File Selection<\/strong><\/li><\/ul><ul><li><strong>Quick Access Menu<\/strong><\/li><\/ul><ul><li><strong>Localization<\/strong><\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong>Management Of Storage services<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"579\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-10.png\" alt=\"\" class=\"wp-image-32576\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-10.png 910w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-10-300x191.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-10-768x489.png 768w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a><strong>How To Create a File Explorer Component in Angular?<\/strong><\/h2>\n\n\n\n<p>Creating a file management component in angular may seem complex, but it is pretty easy. In this part, we will learn to use an angular material library. It will help us to create a visually appealing component that manages the files.<\/p>\n\n\n\n<p>Ready? So let&#8217;s start our work.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Set A New Project<\/strong><\/h3>\n\n\n\n<p>First, we will learn how to set up a new project. We have to use angular-CLI for this purpose. CLI helps us to create the project by following the code:<\/p>\n\n\n\n<p>ng new angular-file-explorer<\/p>\n\n\n\n<p>Since we have to do it in an ordered way, we must create our component in a separate feature module. So we use the following code at the root of our project:<\/p>\n\n\n\n<p>ng generate module file-explorer<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Using External Dependencies<\/strong><\/h3>\n\n\n\n<p>Here we will use the angular material library. It will give us UI components. The UI components in this library follow the material design styles of Google. Therefore, these components just look awesome.<\/p>\n\n\n\n<p>But we have to install the library by using npm as under:<\/p>\n\n\n\n<p>npm install &#8211;save @angular\/material @angular\/cdk<\/p>\n\n\n\n<p>We also need to import different styles along with our library. For this purpose, we use style.css file to import them as under:<\/p>\n\n\n\n<p>@import &#8216;~@angular\/material\/prebuilt-themes\/indigo-pink.css&#8217;;<\/p>\n\n\n\n<p>Since we also need to have material design icons, we add a link in the index.html file under:<\/p>\n\n\n\n<p>&lt;link<\/p>\n\n\n\n<p>&nbsp; href=&#8221;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&#8221;<\/p>\n\n\n\n<p>&nbsp; rel=&#8221;stylesheet&#8221;<\/p>\n\n\n\n<p>\/&gt;<\/p>\n\n\n\n<p>We need to use flexbox to align the items nicely.<\/p>\n\n\n\n<p>npm install &#8211;save @angular\/flex-layout<\/p>\n\n\n\n<p>Moreover, we need a small module that helps us to generate random ids:<\/p>\n\n\n\n<p>npm install &#8211;save uuid<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"943\" height=\"633\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-11.png\" alt=\"\" class=\"wp-image-32577\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-11.png 943w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-11-300x201.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-11-768x516.png 768w\" sizes=\"auto, (max-width: 943px) 100vw, 943px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Import Stuff<\/strong><\/h3>\n\n\n\n<p>We must know that our angular material has to follow a modular approach. So what we do is we import different stuff into the file-explorer module.<\/p>\n\n\n\n<p>One thing should be clear we only adjust the module until it starts looking like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"890\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-12.png\" alt=\"\" class=\"wp-image-32578\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-12.png 975w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-12-300x274.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-12-768x701.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"650\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-13.png\" alt=\"\" class=\"wp-image-32579\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-13.png 975w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-13-300x200.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-13-768x512.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Define Modules<\/strong><\/h3>\n\n\n\n<p>In this step, we define file modules for our folders and files. We achieve it by creating a class for the file manager module:<\/p>\n\n\n\n<p>ng generate class file-explorer\/model\/fileElement<\/p>\n\n\n\n<p>FileElement class helps us to define things that are being displayed in our file manager.<\/p>\n\n\n\n<p>export class FileElement {<\/p>\n\n\n\n<p>&nbsp; id?: string<\/p>\n\n\n\n<p>&nbsp; isFolder: boolean<\/p>\n\n\n\n<p>&nbsp; name: string<\/p>\n\n\n\n<p>&nbsp; parent: string<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Creation Of A Dumb Component<\/strong><\/h3>\n\n\n\n<p>Since we need to create a reusable angular file management component, we achieve it by creating a dumb component. It makes the component completely independent from the server logic. Moreover, it will have zero private states.<\/p>\n\n\n\n<p>The process enables the component to be used with state-management libraries. One main example of state management libraries is ngrx.<\/p>\n\n\n\n<p>We should aim to design the file management component so that it becomes reusable. At the same time, there are multiple ways that can help us handle the files. So we make it as dumb as possible.<\/p>\n\n\n\n<p>When implementing this system, we have to handle everything via outputs and inputs. The component will help us to receive an array including FileElements and visualize them.<\/p>\n\n\n\n<p>The component also takes action to notify the parent component by firing an event. It happens once the user takes action. This process also gives us a nice separation&nbsp; between logic and view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"938\" height=\"625\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-14.png\" alt=\"\" class=\"wp-image-32580\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-14.png 938w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-14-300x200.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-14-768x512.png 768w\" sizes=\"auto, (max-width: 938px) 100vw, 938px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Implementation Of Component Logic<\/strong><\/h3>\n\n\n\n<p>We implement small functions that emit events for our outputs. We place all these functions in FileExplorerComponent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"1024\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-15-960x1024.png\" alt=\"\" class=\"wp-image-32581\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-15-960x1024.png 960w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-15-281x300.png 281w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-15-768x819.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-15.png 975w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Creation Of Angular Material Dialogues<\/strong><\/h3>\n\n\n\n<p>It is interesting to note that the angular material implements a dialog for us. But we have to create a small component for each dialog. We need two:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\" start=\"1\">\n<li>newFolerDialog<\/li>\n\n\n\n<li>renameDialog<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"535\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-16.png\" alt=\"\" class=\"wp-image-32582\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-16.png 975w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-16-300x165.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-16-768x421.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<p>We have to create them in the form of separate components. It helps to keep them independent. In this process, we use angular-CLI.<\/p>\n\n\n\n<p>ng generate component file-explorer\/modals\/newFolderDialog<\/p>\n\n\n\n<p>And then, we use the following code:<\/p>\n\n\n\n<p>ng generate component file-explorer\/modals\/renameDialog<\/p>\n\n\n\n<p>The templates will look like as under:<\/p>\n\n\n\n<p>&lt;h1 mat-dialog-title&gt;Create a new folder&lt;\/h1&gt;<\/p>\n\n\n\n<p>&lt;mat-dialog-content&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;mat-form-field class=&#8221;example-full-width&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;input matInput placeholder=&#8221;Folder Name&#8221; [(ngModel)]=&#8221;folderName&#8221; \/&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/mat-form-field&gt;<\/p>\n\n\n\n<p>&lt;\/mat-dialog-content&gt;<\/p>\n\n\n\n<p>&lt;mat-dialog-actions&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;button mat-raised-button mat-dialog-close&gt;Cancel&lt;\/button&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;button mat-raised-button [mat-dialog-close]=&#8221;folderName&#8221; color=&#8221;primary&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; OK<\/p>\n\n\n\n<p>&nbsp; &lt;\/button&gt;<\/p>\n\n\n\n<p>&lt;\/mat-dialog-actions&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Opening The Created Dialogs<\/strong><\/h3>\n\n\n\n<p>import { MatDialog } from &#8216;@angular\/material\/dialog&#8217;;<\/p>\n\n\n\n<p>&#8230;<\/p>\n\n\n\n<p>constructor(public dialog: MatDialog) {}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Designing The File Manager Component<\/strong><\/h3>\n\n\n\n<p>Finally, we set up the file manager component by using the code as under:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"1024\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-17-629x1024.png\" alt=\"\" class=\"wp-image-32583\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-17-629x1024.png 629w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-17-184x300.png 184w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-17-768x1251.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-17.png 891w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<p>Then we place menus as under:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"823\" height=\"1024\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-18-823x1024.png\" alt=\"\" class=\"wp-image-32584\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-18-823x1024.png 823w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-18-241x300.png 241w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-18-768x955.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2023\/01\/image-18.png 975w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/figure>\n\n\n\n<p>Finally, our component is ready for displaying files and passing through user interaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a><strong>Final Thoughts<\/strong><\/h3>\n\n\n\n<p>We have learned to make a file manager component using the codes given above. But to create a fully functional component, we must handle all the events outside the component. We can develop it easily by implementing an in-memory solution or developing it against our API.<\/p>\n\n\n\n<p>You can find all the coding examples provided in the article <a href=\"https:\/\/carbon.now.sh\/YjpJHKhzHtOxTAlgHoMA\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular file management is essential to web application development. But most people get confused about using the codes and everything. This tutorial will make it easy to implement file management&#8230; <\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[],"class_list":["post-32573","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/32573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=32573"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/32573\/revisions"}],"predecessor-version":[{"id":32585,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/32573\/revisions\/32585"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=32573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=32573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=32573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}