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()" >Ajouter le fichier {{fileChooseName}}</button>
    <label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>-->

    <div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
        <div class="horizontal-container" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="stretch" fxFlex="auto">
            <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
                <div class="box-title">Dropzone</div>

                <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto" style="background-color: green;">
                    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
                </div>
            </div>
        </div>
    </div>


</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>-->
            <div class="btn-group" dropdown>
                <button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{folder.name}}" placement="top"  mdbWavesEffect>
                    <i class="fa fa-arrows" aria-hidden="true"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest.name}}</a>
                </div>
            </div>
        </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="{{file.data}}" 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>

            <div class="btn-group" dropdown>
                <button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{file.name}}" placement="top" mdbWavesEffect>
                    <i class="fa fa-arrows" aria-hidden="true"></i>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
                </div>
            </div>
        </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.type }}</td>
        <td>{{ file.lastDate }}</td>
        <div *ngIf="file.type === ('image/jpeg')">
            <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
        </div>
        <div *ngIf="file.type === ('image/png')">
            <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
        </div>
        <div *ngIf="file.type === ('application/pdf')">
            <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
            <object [data]=file.urlSafe type="application/pdf"
                    width="350" height="200" typemustmatch>
            </object>

        </div>
        <div *ngIf="file.type === ('video/mp4')">
            <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
            <vg-player style="height: 200px; width: 350px">
                <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
                    <source [src]=file.urlSafe type="video/mp4">
                </video>
            </vg-player>
        </div>
        <div *ngIf="file.type === ('text/plain')">
            <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
              <div>{{test}}</div>
              <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
            <object [data]=file.urlSafe type="text/plain"
                    width="350" height="200" typemustmatch>
            </object>
        </div>
        <div *ngIf="file.type === ''">
            <i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
            <!--<object [data]=file.url type="text/plain"
                    width="350" height="200" typemustmatch>
            </object>-->
            <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
              <div>{{test}}</div>
              <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
        </div>
        <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
            <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
            <vg-player style="height: 50px; width: 350px">
                <vg-controls>
                    <vg-play-pause></vg-play-pause>
                    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                    <vg-scrub-bar>
                        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                    </vg-scrub-bar>

                    <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                    <vg-mute></vg-mute>

                    <vg-fullscreen></vg-fullscreen>
                </vg-controls>

                <audio #media [vgMedia]="media" id="myAudio" preload="auto">
                    <source  [src]=file.urlSafe type="audio/mp3">
                </audio>
            </vg-player>
        </div>
    </tr>

    </tbody>
</table>