preview all files

models/FileMongo.js

@@ -33,6 +33,10 @@ var FileMongoShema = new Schema({
   lastDate: {
     type: String,
     unique: false
+  },
+  url: {
+      type: String,
+      unique: false
   }
 });
 

routes/api.js

@@ -80,6 +80,22 @@ router.post('/uploadFileMongo', function(req, res, next) {
   });
 });
 
+/* SAVE URL FILE */
+router.post('/saveURLFileMongo', function(req, res, next) {
+    console.log("New File data  req.body", JSON.stringify(req.body));
+
+    FileMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {url: req.body.url},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('File Not Found');
+        }
+        res.json({ message: 'File updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
+    });
+});
+
 /* SAVE FOLDER */
 router.post('/createFolder', function(req, res, next) {
     FolderMongo.create(req.body, function (err, post) {

src/app/book/book.component.html

@@ -62,7 +62,7 @@
       <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="">
+        <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>
@@ -80,31 +80,46 @@
         <td>{{ file.type }}</td>
         <td>{{ file.lastDate }}</td>
         <div *ngIf="file.type === ('image/jpeg')">
-          <img src="../../../public/{{ file._id.toString() }}" class="img-fluid flex-center" width="150" height="150">
+          <img [src]=file.url class="img-fluid flex-center" width="350" height="200">
         </div>
         <div *ngIf="file.type === ('image/png')">
-          <img src="../../../public/{{ file._id.toString() }}" class="img-fluid flex-center" width="150" height="150">
+          <img [src]=file.url 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>
+          <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
+            <object [data]=file.url 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>
+            <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
-            <vg-player style="height: 200px; width: 200px">
+            <vg-player style="height: 200px; width: 350px">
                 <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
-                    <source src="../../../public/{{ file._id.toString() }}" type="video/mp4">
+                    <source [src]=file.url type="video/mp4">
                 </video>
-            </vg-player>-->
+            </vg-player>
         </div>
         <div *ngIf="file.type === ('text/plain')">
-          <i class="fa fa-file-text-o" aria-hidden="true"></i>
           <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
             <div>{{test}}</div>
-            <a href = "../../../public/{{file._id}}">show me</a>-->
+            <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
+            <object [data]=file.url type="text/plain"
+                    width="350" height="200" typemustmatch>
+            </object>
         </div>
-        <div *ngIf="file.type === ('audio/mpeg')">
+        <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')">
             <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
-            <vg-player style="height: 50px; width: 400px">
+            <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>
@@ -123,11 +138,11 @@
                 </vg-controls>
 
                 <audio #media [vgMedia]="media" id="myAudio" preload="auto">
-                    <source src="../../../public/{{ file._id.toString() }}" type="audio/mp3">
+                    <source  [src]=file.url type="audio/mp3">
                 </audio>
             </vg-player>
         </div>
       </tr>
 
       </tbody>
-    </table>
+    </table>

src/app/book/book.component.ts

@@ -9,6 +9,7 @@ import {Form} from "@angular/forms";
 import * as formData from 'form-data';
 import {forEach} from '@angular/router/src/utils/collection';
 import {type} from 'os';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-book',
@@ -28,7 +29,7 @@ export class BookComponent implements OnInit, OnDestroy {
   inputCreateFolder: String;
   reader: FileReader;
   test: String;
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
+  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public sanitizer: DomSanitizer) {
     this.isClickCreateFolder = false;
     this.fileChooseName = 'None';
     this.filesToUpload = [];
@@ -77,6 +78,14 @@ export class BookComponent implements OnInit, OnDestroy {
             console.log('data : ' + data);
         });
     }
+    saveURLFileMongo(fileToCreateURL){
+      fileToCreateURL.url = '../../../public/' + fileToCreateURL._id.toString() + this.getStringExtention(fileToCreateURL);
+
+        this.http.post('/api/saveURLFileMongo', fileToCreateURL).subscribe(data => {
+            console.log('data : ' + data);
+        });
+    }
+
 
   getfiles() {
       //var preview = document.querySelector('img');
@@ -86,46 +95,13 @@ export class BookComponent implements OnInit, OnDestroy {
 
       this.http.post('/api/getFileList', {mainPath : this.mainFolder.path, owner: this.currentUser.username.toString()}).subscribe(files => {
           if (files) {
-              // this.allUserFile = files;
+
 
               this.allUserFile = files;
-
+              for (let f of this.allUserFile) {
-
+                  f.data = f.url;
-              // for (let f of this.allUserFile) {
+                  f.url = this.sanitizer.bypassSecurityTrustResourceUrl(f.url);
-              //
+              }
-              //     console.log('f.type : ' + f.type);
-              //
-              //
-              //     /*
-              //     var textFileAsBlob = new Blob([f.blob], {
-              //         type: 'text/plain'
-              //     });*/
-              //
-              //     if (f.type === ('text/plain')) {
-              //         JSON.stringify(f);
-              //         //f.function( fii => {
-              //             this.reader = new FileReader();
-              //             var ff = new Blob([JSON.stringify(f, null, 2)], {type: 'text/plain'})
-              //             var me = this;
-              //             this.reader.onload = function(e:any) {
-              //                 me.test = e.target.result;
-              //                 console.log('meee.test : ' + JSON.stringify(e.target.result));
-              //             };
-              //             //ff.type = f.type;
-              //             //ff.size = f.taille;
-              //             //ff.slice(f);
-              //         var gugu = new File(('../../../public/' + f._id)[], f.name);
-              //             this.reader.readAsText('../../../public/' + f._id.toString(), f.name);
-              //
-              //             //console.log('couilles : ' + meee.reader.readAsText(fii));
-              //
-              //             //console.log('couilles : ' + JSON.stringify(f));
-              //         //});
-              //
-              //
-              //     }
-              // }
-
           } else {
               this.allUserFile = [];
           }
@@ -157,6 +133,7 @@ export class BookComponent implements OnInit, OnDestroy {
               this.mainFolder = folder;
               this.getfolders();
               this.getfiles();
+
           } else {
               if (path === 'Home'){
                   this.http.post('api/createFolder', { name: 'Home', parent: '', path: 'Home', taille: 'taiile', idUser: this.currentUser._id.toString(), fileList: [], folderList: [], owner: this.currentUser.username.toString() }).subscribe(resp => {
@@ -192,7 +169,8 @@ export class BookComponent implements OnInit, OnDestroy {
 
   upload() {
       if(this.mainFolder !== undefined){
-          this.http.post('api/uploadFileMongo', { name: this.fileChooseName.toString(), path: this.mainFolder.path.toString(), type: this.filesToUpload[0].type.toString(), taille: this.filesToUpload[0].size.toString(), idUser: this.currentUser._id.toString(), owner: this.currentUser.username.toString(), lastDate: Date.now().toString(), data: ''}).subscribe(resp => {
+          this.http.post('api/uploadFileMongo', { name: this.fileChooseName.toString(), path: this.mainFolder.path.toString(), type: this.filesToUpload[0].type.toString(), taille: this.filesToUpload[0].size.toString(), idUser: this.currentUser._id.toString(), owner: this.currentUser.username.toString(), lastDate: Date.now().toString(), url: ''}).subscribe(resp => {
+              this.saveURLFileMongo(resp);
               this.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => {
                   this.getfiles();
                   this.filesToUpload = null;
@@ -216,7 +194,7 @@ export class BookComponent implements OnInit, OnDestroy {
       var formData: any = new FormData();
       var xhr = new XMLHttpRequest();
 
-      formData.append("public[]", files[0], monFile._id);
+      formData.append("public[]", files[0], monFile._id + this.getStringExtention(monFile));
       xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
           if (xhr.status == 200) {
@@ -232,4 +210,10 @@ export class BookComponent implements OnInit, OnDestroy {
     });
   }
 
+
+    getStringExtention(monFile: any){
+        return ( monFile.name.indexOf('.') > 0 ) ? '.' + monFile.name.split('.').pop().toLowerCase() : '';
+    }
 }
+
+

src/app/login/login.component.html

@@ -19,5 +19,5 @@
 
 
 <button class="btn-facebook" href="/auth/facebook"></button>
-  <button class="btn-github" href="/auth/github"></button>
+<button class="btn-github" href="/auth/github"></button>
-    <button class="btn-google" href="/auth/google"></button>
+<button class="btn-google" href="/auth/google"></button>