Let's create a File Manager From Scratch With React And Typescript Chapter II: The File Manager
Tags: react, typescript, mongez
Published: 2022-09-11 02:58:45

---
title: Let's create a File Manager From Scratch With React And Typescript Chapter II: The File Manager 
published: true
description: 
series: File Manager React Mongez
tags: react, typescript, mongez
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314szylzr6lwrc0bizyb.png
# Use a ratio of 100:42 for best results.
---

Now our setup is ready, let go with our file manager.

## Creating the File Manager Module

Inside `src/apps/front-office` we'll create `file-manager` directory, but it will not have neither a provider nor a route as there will no page for the module, just a popup (modal) for it.

Now let's create a `utils` directory, inside it create `FileManager.ts`

In our `FileManager.ts` we'll establish a basic file manager class

```ts
export default class FileManager {

}
```

So our structure will look like

![File Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7c68oc4mxp8vz5enaqk.png)

## File Manager Workflow

Before we continue coding, let's make a small stop and think first, how this should work, what data will be used, and the requests, how we'll work with backend requests.

If we look at the file manager image in the cover image for the article, we can see there are toolbar with actions, so we will have list of `commands` that will be executed.

Also we have to list root directories, so we need to know the root path of the file manager.

By default the root directory will be the `current` directory that will be opened.

The current directory will have list of directories and files, we'll call it `nodes`, so the file will be considered as `node` and the directory as well.

Let's write these then continue with our flow

```ts
// FileManager.ts
export default class FileManager {
  /**
   * Root path
   */
  protected rootPath = "/";

  /**
   * Current directory path
   */
  protected currentDirectoryPath = "/";
}
```

Nothing special here, we just defined the root path `which is obviously /` and the current directory which will be the opened one.

Now we add the current directory node, which will be just declared.

```ts
// FileManager.ts
export default class FileManager {
  /**
   * Root path
   */
  protected rootPath = "/";

  /**
   * Current directory path
   */
  protected currentDirectoryPath = "/";
  /**
   * Current directory node
   */
  protected currentDirectoryNode?: DirectoryNode;
}
```

We defined our current directory node with type `DirectoryNode`, but it is not defined yet, let's create it.

In `src/apps/front-office/file-manager` create `types` directory and inside it create `FileManager.types.ts`

Now let's go to the types file

```ts
// file-manager/types/FileManager.types.ts
export type DirectoryNode = {
  //
};
```

We'll create an empty type for now, this will be updated later, now let's head back to our `FileManager` file and import the type.

```ts
// FileManager.ts

import { DirectoryNode } from "../types/FileManager.types";

export default class FileManager {
  /**
   * Root path
   */
  protected rootPath = "/";

  /**
   * Current directory path
   */
  protected currentDirectoryPath = "/";

  /**
   * Current directory node
   */
  protected currentDirectoryNode?: DirectoryNode;
}
```

So far so good, nothing hard..just not yet xD, now what is the next step?

## File Manager Nodes

Before we go deeper, let's have a look at `nodes`, what possibly could be a `node`, or what should be included inside it?

For starter, we can add the `name`, the node `path` related to the root path, also we can define whether it is a `directory` or not, `size` maybe? let's add all of it

Going back to `FileManager.types.ts` file

```ts
// file-manager/types/FileManager.types.ts

export type Node = {
  /**
   * Node Name
   */
  name: string;
  /**
   * Node full path to root
   */
  path: string;
  /**
   * Node size in bits
   */
  size: number;
  /**
   * Is node directory
   */
  isDirectory: boolean;
};

export type DirectoryNode = {
  //
};
```

Now created our `Node` with its primitives, the `DirectoryNode` is originally a `Node`, so let's extend it.

```ts
// file-manager/types/FileManager.types.ts

export type Node = {
  /**
   * Node Name
   */
  name: string;
  /**
   * Node full path to root
   */
  path: string;
  /**
   * Node size in bits
   */
  size: number;
  /**
   * Is node directory
   */
  isDirectory: boolean;
};

export type DirectoryNode = Node & {
  //
};
```

What is the main difference between directories and files? well the main difference is `directories` have `children`, any child of a directory can be a `directory` or a `file`, so basically the directory children are either `DirectoryNode` or `FileNode`.

Oh i didn't define the `FileNode`, for the time being it will just equal to `Node`

```ts
export type Node = {
  /**
   * Node Name
   */
  name: string;
  /**
   * Node full path to root
   */
  path: string;
  /**
   * Node size in bits
   */
  size: number;
  /**
   * Is node directory
   */
  isDirectory: boolean;
};

export type FileNode = Node;

export type DirectoryNode = Node & {
  children: Node[];
};
```

We added two lines `FileNode` type which equals to `Node` and the children type which is an array of `DirectoryNode` And/Or `FileNode`.

Let's add some comments over the types to make it more clear.

```ts
/**
 * File Manager node is the primary data structure for the File Manager.
 * It can be a directory or a file.
 * It contains the following properties:
 */
export type Node = {
  /**
   * Node Name
   */
  name: string;
  /**
   * Node full path to root
   */
  path: string;
  /**
   * Node size in bits
   */
  size: number;
  /**
   * Is node directory
   */
  isDirectory: boolean;
};

/**
 * FileNode is a node that represents a file.
 * It extends the `Node` type.
 */
export type FileNode = Node;

/**
 * DirectoryNode is a node that represents a directory.
 * It extends the `Node` type.
 */
export type DirectoryNode = Node & {
  /**
   * Directory children
   * It can be a list of `FileNode` and/or a `DirectoryNode`
   */
  children: Node[];
};
```

Now our basic properties are defined, so the next step is to load current root nodes, that's what we're going to do in our next chapter.

You can see Chapter Two File in [Github Repository](https://github.com/hassanzohdy/file-manager-react/tree/2-FileManager)

> Don't forget the `main` branch has the latest updated code.