### File

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

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties

- creatingNew
- deleting
- fileToUpload
- loading
- mainDir
- shortLink
- user

###### Methods

- Public countFiles
- createDirExec
- createFileExec
- deleteDirExec
- deleteFileExec
- getFiles
- ngOnInit
- onChange
- onUpload
- toDirectory

### Constructor

`constructor(fileService: FileService, dataService: ApiService)`
Defined in src/app/file/file.component.ts:26

Parameters :

Name | Type | Optional
fileService | `FileService` | No
dataService | `ApiService` | No

### Methods

Public countFiles
`countFiles(directory: Directory)`
Defined in src/app/file/file.component.ts:129

Parameters :

Name | Type | Optional
directory | `Directory` | No

Returns : `number`

createDirExec
`createDirExec(name: string)`
Defined in src/app/file/file.component.ts:119

Parameters :

Name | Type | Optional
name | `string` | No

Returns : `void`

createFileExec
`createFileExec(file: File)`
Defined in src/app/file/file.component.ts:114

Parameters :

Name | Type | Optional
file | `File` | No

Returns : `void`

deleteDirExec
`deleteDirExec($event: any)`
Defined in src/app/file/file.component.ts:107

Parameters :

Name | Type | Optional
$event | `any` | No

Returns : `void`

deleteFileExec
`deleteFileExec($event: any)`
Defined in src/app/file/file.component.ts:100

Parameters :

Name | Type | Optional
$event | `any` | No

Returns : `void`

getFiles
`getFiles()`
Defined in src/app/file/file.component.ts:37
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/file/file.component.ts:32
Returns : `void`

onChange
`onChange(event)`
Defined in src/app/file/file.component.ts:45

Parameters :

Name | Optional
event | No

Returns : `void`

onUpload
`onUpload()`
Defined in src/app/file/file.component.ts:50
Returns : `void`

toDirectory
`toDirectory(name: string, obj: any, path: string)`
Defined in src/app/file/file.component.ts:71

Parameters :

Name | Type | Optional
name | `string` | No
obj | `any` | No
path | `string` | No

Returns : `Directory`

### Properties

creatingNew
Type : `number`
Default value : `0`
Defined in src/app/file/file.component.ts:26

deleting
Default value : `false`
Defined in src/app/file/file.component.ts:24

fileToUpload
Type : `File`
Default value : `null`
Defined in src/app/file/file.component.ts:25

loading
Default value : `false`
Defined in src/app/file/file.component.ts:23

mainDir
Type : `Directory`
Default value : `{ name: '', files: [], dirs: [], path: '/' }`
Defined in src/app/file/file.component.ts:16

shortLink
Type : `string`
Default value : `''`
Defined in src/app/file/file.component.ts:22

user
Type : `User`
Defined in src/app/file/file.component.ts:15

    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();
      }

      getFiles(): void {
        this.fileService.getFileList(this.user.username)
          .subscribe(data => {
            this.mainDir = this.toDirectory('', data, '/');
            console.log(this.mainDir);
          });
      }

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

      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;
            }
          }
        );
      }

      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;
      }

      deleteFileExec($event: any): void {
        const index = this.mainDir.files.indexOf($event, 0);
        if (index > -1) {
          this.mainDir.files.splice(index, 1);
        }
      }

      deleteDirExec($event: any): void {
        const index = this.mainDir.dirs.indexOf($event, 0);
        if (index > -1) {
          this.mainDir.dirs.splice(index, 1);
        }
      }

      createFileExec(file: File): void {
        this.mainDir.files.push(file);
        this.creatingNew = 0;
      }

      createDirExec(name: string): void {
        this.mainDir.dirs.push({
          name,
          dirs: [],
          files: [],
          path: '/'
        });
        this.creatingNew = 0;
      }

      public countFiles(directory: Directory): number {
        let count = directory.files.length;
        for (const dir of directory.dirs) {
          count += this.countFiles(dir);
        }
        return count;
      }
    }

    <div id="tray">
      <button (click)="creatingNew = 2" style="margin-right: 10px;">Create A New File</button>
      <button (click)="creatingNew = 1" id="myBtn" style="margin-left: 10px;">Create New Directory</button>
    </div>

    <div class="container">
      {{mainDir.dirs.length}} directories, {{mainDir.files.length}} files (Total {{countFiles(mainDir)}} files):
    </div>

    <app-file-dir-card *ngIf="creatingNew !== 0" [parentPath]="''" [isNew]="true" [isFile]="creatingNew === 2" (createFile)="createFileExec($event)" (createDir)="createDirExec($event)" (cancelled)="creatingNew = 0" [parentDirs]="this.mainDir.dirs" [parentFiles]="this.mainDir.files"></app-file-dir-card>
    <app-file-dir-card *ngFor="let dir of mainDir.dirs" [isFile]="false" [directory]="dir" [level]="0" [trace]="[mainDir.dirs.indexOf(dir)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)" [isNew]="false" [noEdits]="dir.name === 'attempts'"></app-file-dir-card>
    <app-file-dir-card *ngFor="let file of mainDir.files" [isFile]="true" [file]="file" [level]="0" [trace]="[mainDir.files.indexOf(file)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)" [isNew]="false"></app-file-dir-card>

    <!--<div [class.open]="uploadPopupActive" id="file-upload-cover"></div>-->

    <!--<div [class.open]="uploadPopupActive" id="file-upload-popup">-->
    <!--  <p>Upload a file:</p>-->
    <!--  <input (change)="onChange($event)" id="file-upload-input" type="file">-->
    <!--  <div *ngIf="shortLink !== ''" style="margin-top: 10px">-->
    <!--    <a href="{{shortLink}}" target="_blank">Link to last upload</a>-->
    <!--  </div>-->
    <!--  <p *ngIf="!loading">-->
    <!--    <button (click)="uploadPopupActive = false;" id="upload-cancel-btn">Close</button>-->
    <!--    <button (click)="onUpload()" id="file-upload-btn" [class.disabled]="fileToUpload == null || fileToUpload == undefined">Upload</button>-->
    <!--  </p>-->
    <!--  <p *ngIf="loading" style="margin-top: 20px; text-align: center">-->
    <!--    Uploading...-->
    <!--  </p>-->
    <!--</div>-->

`./file.component.scss`

    #tray {
      text-align: center;
      width: 100%;

      button {
        margin-top: 10px;
        margin-bottom: 10px;
        display: inline-block;
        text-align: center;
        font-size: 1rem;
      }
    }

    .container {
      margin-bottom: 20px;
    }

    .card {
      padding: 15px;
      background: var(--dark);
      border-bottom: 1px solid #fff;

      button {
        float: right;
        border: none;
      }

      .title {
        padding: 10px 20px;
        font-size: 1.1em;
      }

      .details {
        margin: 10px;
      }

      .lang {
        margin: 10px;
      }
    }

    #file-upload-popup {
      position: fixed;
      top: calc(40vh - 100px);
      width: 30vw;
      left: calc(35vw - 20px);
      border-bottom: 1px solid #ddf;
      padding: 20px;
      background: #224;
      transform: scale(0);
      opacity: 0;
      transition: all 0.25s;
      z-index: 1000;

      a {
        font-size: 0.7em;
      }

      &.open {
        transform: none;
        opacity: 1;
      }

      #file-upload-input {
        font-family: inherit;
        position: relative;

        &::-webkit-file-upload-button {
          background: transparent;
          border: none;
          outline: none;
          border-bottom: 1px solid #ddf;
          padding: 5px 10px;
          font-family: Lato, sans-serif;
          color: #ddf;
          cursor: pointer;
        }
      }

      p {
        margin: 0 10px 20px 0;
      }
    }

    #file-upload-btn, #upload-cancel-btn {
      float: right;
      margin: 10px 2px 0 2px;
    }

    #file-upload-cover {
      z-index: 999;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: none;
      transition: all 0.25s;

      &.open {
        display: block;
        background: #0015;
      }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""