### File

`src/app/file/file.component.ts`

### Metadata

selector | `app-file`
styleUrls | `file.component.scss`
templateUrl | `file.component.html`

### Constructor

`constructor(fileService: FileService, dataService: ApiService)`

### Methods

getFiles
`getFiles()`
A function to obtain the directory structure and recursive tree of the root directory corresponding to the user on the server. It stores the obtained structure into as a Directory interface. Returns: `void`

onChange
`onChange(event: any)`
Returns: `void`

onUpload
`onUpload()`
Returns: `void`

toDirectory
`toDirectory(name: string, obj: any, path: string)`

Converts the input object `obj` into a Directory interface.

Parameters :

- name
  - The name of the directory
- obj
  - The input JSON object
- path
  - The path of the parent directory

Returns: `Directory`

deleteFileExec
`deleteFileExec($event: any)`
Deletes the bar corresponding to the file on the frontend after successful deletion from the backend. Returns: `void`

deleteDirExec
`deleteDirExec($event: any)`
Deletes the bar corresponding to the directory on the frontend after successful deletion from the backend. Returns: `void`

createFileExec
`createFileExec(file: File)`
Creates a bar (subcomponent) to represent the newly created file, called after successful creation at the backend. Returns: `void`

createDirExec
`createDirExec(name: string)`
Creates a bar (subcomponent) to represent the newly created directory, called after successful creation at the backend. Returns: `void`

Public countFiles
`countFiles(directory: Directory)`

Counts the total number of files recursively in the input directory interface.

Parameters :

- directory
  - The input directory interface.

Returns: `number`

### Properties

creatingNew
`creatingNew: `number` </bcode>`
Default value: `0`

deleting
`deleting: `boolean` </bcode>`
Default value: `false`

fileToUpload
`fileToUpload: `File` </bcode>`

loading
`loading: `boolean` </bcode>`
Default value: `false`

mainDir
`mainDir: `Directory` </bcode>`

shortLink
`shortLink: `string` </bcode>`

user
`user: `User` </bcode>`

    import {Component, OnInit} from '@angular/core';
    import {File} from '../file';
    import {FileService} from '../file.service';
    import {ApiService} from '../api.service';
    import {User} from '../user';
    import {Directory} from '../directory';

    @Component({
      selector: 'app-file',
      templateUrl: './file.component.html',
      styleUrls: ['./file.component.scss']
    })
    export class FileComponent implements OnInit {

      user: User;
      mainDir: Directory = {
        name: '',
        files: [],
        dirs: [],
        path: '/'
      };
      shortLink = '';
      loading = false; // Flag variable
      deleting = false; // Flag variable
      fileToUpload: File = null;
      creatingNew = 0;

      constructor(private fileService: FileService,
                  private dataService: ApiService) {
      }

      ngOnInit(): void {
        this.user = JSON.parse(this.dataService.getToken());
        this.getFiles();
      }

      /**
       * A function to obtain the directory structure and recursive tree of the root directory corresponding to the user on the server. It
       * stores the obtained structure into  as a Directory interface.
       */
      getFiles(): void {
        this.fileService.getFileList(this.user.username)
          .subscribe(data => {
            this.mainDir = this.toDirectory('', data, '/');
            console.log(this.mainDir);
          });
      }

      /**
       * @ignore
       */
      onChange(event): void {
        this.fileToUpload = event.target.files[0];
        console.log(this.fileToUpload);
      }

      /**
       * @ignore
       */
      onUpload(): void {

        if ((document.getElementById('file-upload-input') as HTMLInputElement).value === '') {
          return;
        }

        this.loading = true;
        console.log(this.fileToUpload);

        this.fileService.upload2(this.fileToUpload).subscribe(
          (event: any) => {
            if (typeof (event) === 'object') {
              this.fileToUpload = null;
              (document.getElementById('file-upload-input') as HTMLInputElement).value = '';
              this.shortLink = event.link;
              this.loading = false;
            }
          }
        );
      }

      /**
       * Converts the input object `obj` into a Directory interface.
       * @param name - The name of the directory
       * @param obj - The input JSON object
       * @param path - The path of the parent directory
       */
      toDirectory(name: string, obj: any, path: string): Directory {
        const ret: Directory = {
          name,
          dirs: [],
          files: [],
          path: path === '/' ? path : path + '/'
        };

        for (const file of obj.files) {
          const sp = file.split('.');
          const f: File = {
            username: this.user.username,
            filename: file.replace(/\.[^/.]+$/, ''),
            language: '.' + sp[sp.length - 1],
            text: '',
            path: path + '/' + name
          };
          ret.files.push(f);
        }

        for (const dir in obj.dirs) {
          if (obj.dirs.hasOwnProperty(dir)) {
            ret.dirs.push(this.toDirectory(dir, obj.dirs[dir], ret.path + name));
          }
        }

        return ret;
      }

      /**
       * Deletes the bar corresponding to the file on the frontend after successful deletion from the backend.
       */
      deleteFileExec($event: any): void {
        const index = this.mainDir.files.indexOf($event, 0);
        if (index > -1) {
          this.mainDir.files.splice(index, 1);
        }
      }

      /**
       * Deletes the bar corresponding to the directory on the frontend after successful deletion from the backend.
       */
      deleteDirExec($event: any): void {
        const index = this.mainDir.dirs.indexOf($event, 0);
        if (index > -1) {
          this.mainDir.dirs.splice(index, 1);
        }
      }

      /**
       * Creates a bar (subcomponent) to represent the newly created file, called after successful creation at the backend.
       */
      createFileExec(file: File): void {
        this.mainDir.files.push(file);
        this.creatingNew = 0;
      }

      /**
       * Creates a bar (subcomponent) to represent the newly created directory, called after successful creation at the backend.
       */
      createDirExec(name: string): void {
        this.mainDir.dirs.push({
          name,
          dirs: [],
          files: [],
          path: '/'
        });
        this.creatingNew = 0;
      }

      /**
       * Counts the total number of files recursively in the input directory interface.
       * @param directory - The input directory interface.
       */
      public countFiles(directory: Directory): number {
        let count = directory.files.length;
        for (const dir of directory.dirs) {
          count += this.countFiles(dir);
        }
        return count;
      }
    }

# results matching ""

# No results matching ""