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
Default value: 0
deleting
deleting: boolean
Default value: false
fileToUpload
fileToUpload: File
loading
loading: boolean
Default value: false
mainDir
mainDir: Directory
shortLink
shortLink: string
user
user: User
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 ""