Sup_File/src/app/book/book.component.html

  <div class="container-fluid">
      <div *ngIf="mainFolder">
          <p> Path : {{mainFolder.path}}</p>
          <p> Vous êtes dans le dossier : {{mainFolder.name}}</p>
          <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Retour à : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
      </div>


      <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
          <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
      </button>



      <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
          <div class="input-group-btn">
              <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
          </div>
          <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
      </div>


    <label class="btn btn-danger btn-sm" mdbTooltip="Choisir fichier" placement="top" >
        <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
        <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
    </label>

    <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Ajouter le fichier : {{fileChooseName}}" placement="top" (click)="upload()" *ngIf="fileChooseName !== 'None'">Ajouter le fichier {{fileChooseName}}</button>
    <label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>
  </div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>#</th>
      <th>Nom</th>
      <th>Taille</th>
      <th>Type</th>
      <th>Date d'ajout</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let folder of allUserFolder; let i = index;">
        <td>
            <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Supprimer : {{folder.name}}" placement="top" (click)="deleteFolder(folder)"><i class="fa fa-close" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Ouvrir : {{folder.name}}" placement="top" (click)="openFolder(folder.path)"><i class="fa fa-folder-open-o" aria-hidden="true"></i></button>
            <!--<button type="button" class="btn btn-warning" (click)="renameFolder(folder)">Rename</button>-->
        </td>

        <td>
            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
                <i class="fa fa-pencil prefix"></i>
            </button>
            <input type="search" class="form-control col-xs-2" placeholder= "{{folder.name}}" [(ngModel)]="folder.name">
        </td>
        <!--<td>{{ folder.name }}</td>-->
        <td>{{ folder.taille}} Mo</td>
        <td>Folder</td>
        <td>{{ folder.owner }}</td>
        <i class="fa fa-folder-open-o" aria-hidden="true"></i>
    </tr>
    <tr *ngFor="let file of allUserFile; let i = index;">
      <td>
          <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)"><i class="fa fa-close" aria-hidden="true"></i></button>

        <a href="../../../public/{{ file._id.toString() }}" download="{{ file.name.toString()}}" type="">
            <button class="btn btn-sm btn-warning" tooltip="Télécharger : {{ file.name.toString()}} : " placement="top">
                <i class="fa fa-download" aria-hidden="true"></i>
            </button>
        </a>
      </td>
        <td>
            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
                <i class="fa fa-pencil prefix"></i>
            </button>
            <input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">
        </td>

        <!--<td>{{ file.name }}</td>-->
        <td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
        <td>{{ file.extention }}</td>
        <td>{{ file.lastDate }}</td>
        <div *ngIf="file.extention === ('image/jpeg')">
          <img src="../../../public/{{ file._id.toString() }}" class="img-fluid flex-center" width="150" height="150">
        </div>
        <div *ngIf="file.extention === ('image/png')">
          <img src="../../../public/{{ file._id.toString() }}" class="img-fluid flex-center" width="150" height="150">
        </div>
        <div *ngIf="file.extention === ('application/pdf')">
          <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
        </div>
        <div *ngIf="file.extention === ('video/mp4')">
          <i class="fa fa-file-movie-o" aria-hidden="true"></i>
        </div>
        <div *ngIf="file.extention === ('text/plain')">
          <i class="fa fa-file-text-o" aria-hidden="true"></i>
        </div>
        <div *ngIf="file.extention === ('audio/mpeg')">
          <i class="fa fa-file-audio-o" aria-hidden="true"></i>
        </div>
      </tr>

      </tbody>
    </table>