drag and drop zone

This commit is contained in:
Tmadkaud 2018-05-18 22:07:38 +02:00
parent d8c540d151
commit 147a1d4d7d
9 changed files with 330 additions and 94 deletions

View File

@ -2,42 +2,46 @@ var mongoose = require('mongoose');
var Schema = mongoose.Schema; var Schema = mongoose.Schema;
var FileMongoShema = new Schema({ var FileMongoShema = new Schema({
uid: { uid: {
type: String, type: String,
unique: false unique: false
}, },
name: { name: {
type: String, type: String,
unique: false unique: false
}, },
path: { path: {
type: String, type: String,
unique: false unique: false
}, },
type: { type: {
type: String, type: String,
unique: false unique: false
}, },
taille: { taille: {
type: String, type: String,
unique: false unique: false
}, },
idUser: { idUser: {
type: String, type: String,
unique: false unique: false
}, },
owner: { owner: {
type: String, type: String,
unique: false unique: false
}, },
lastDate: { lastDate: {
type: String, type: String,
unique: false unique: false
}, },
url: { url: {
type: String, type: String,
unique: false unique: false
} },
urlSafe: {
type: String,
unique: false
},
}); });
module.exports = mongoose.model('FileMongo', FileMongoShema); module.exports = mongoose.model('FileMongo', FileMongoShema);

13
package-lock.json generated
View File

@ -5740,6 +5740,11 @@
"is-obj": "1.0.1" "is-obj": "1.0.1"
} }
}, },
"dropzone": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.4.0.tgz",
"integrity": "sha1-MpDAf1mxietaEemaWMmyra5az+w="
},
"duplexer2": { "duplexer2": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz", "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
@ -11005,6 +11010,14 @@
} }
} }
}, },
"ngx-dropzone-wrapper": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/ngx-dropzone-wrapper/-/ngx-dropzone-wrapper-6.0.0.tgz",
"integrity": "sha512-uwIJVzOjGxXjTpxMdljt16/1bZxLrW1o+K3SA0zB4OXkc01wxA8EdLWOQcYJE+t5S5Y3LJ6XjZ1EAARuGvlFGA==",
"requires": {
"dropzone": "5.4.0"
}
},
"no-case": { "no-case": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

View File

@ -33,6 +33,7 @@
"classlist.js": "1.1.x", "classlist.js": "1.1.x",
"core-js": "2.4.x", "core-js": "2.4.x",
"del": "3.0.x", "del": "3.0.x",
"dropzone": "^5.4.0",
"easy-pie-chart": "2.1.x", "easy-pie-chart": "2.1.x",
"express": "^4.16.2", "express": "^4.16.2",
"express-fileupload": "^0.4.0", "express-fileupload": "^0.4.0",
@ -48,6 +49,7 @@
"multer": "^1.3.0", "multer": "^1.3.0",
"ng-html-util": "1.0.x", "ng-html-util": "1.0.x",
"ngm-cli": "0.5.x", "ngm-cli": "0.5.x",
"ngx-dropzone-wrapper": "^6.0.0",
"passport": "^0.4.0", "passport": "^0.4.0",
"passport-facebook": "^2.1.1", "passport-facebook": "^2.1.1",
"passport-github": "^1.1.0", "passport-github": "^1.1.0",

View File

@ -224,8 +224,8 @@ router.post('/signin', function(req, res) {
/* Multer upload */ /* Multer upload */
router.post('/upload' , multer({storage: storage, limits: {fileSize: 30000000000}}).array("public[]", 12) ,function(req,res,next){ router.post('/upload' , multer({storage: storage, limits: {fileSize: 30000000000}}).array("public[]", 12) ,function(req,res,next){
res.send(req.files); console.log('bebeb : ' + JSON.stringify(req));
res.send(req.files);
}); });
/* Get utilisateur courant */ /* Get utilisateur courant */

View File

@ -23,10 +23,22 @@ import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls'; import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play'; import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering'; import {VgBufferingModule} from 'videogular2/buffering';
// import { DropzoneModule } from 'dropzone';
// import {SingleMediaPlayer} from './single-media-player'; // import {SingleMediaPlayer} from './single-media-player';
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
// Change this to your upload POST address:
url: 'https://httpbin.org/post',
//acceptedFiles: 'image/*',
createImageThumbnails: true
};
const appRoutes: Routes = [ const appRoutes: Routes = [
{ {
path: 'main', path: 'main',
@ -64,6 +76,7 @@ const appRoutes: Routes = [
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
DropzoneModule,
VgCoreModule, VgCoreModule,
VgControlsModule, VgControlsModule,
VgOverlayPlayModule, VgOverlayPlayModule,
@ -84,7 +97,12 @@ const appRoutes: Routes = [
apiKey: 'Your_api_key' apiKey: 'Your_api_key'
}) })
], ],
providers: [MDBSpinningPreloader], providers: [
MDBSpinningPreloader,
{
provide: DROPZONE_CONFIG,
useValue: DEFAULT_DROPZONE_CONFIG
}],
bootstrap: [AppComponent], bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ] schemas: [ NO_ERRORS_SCHEMA ]
}) })

View File

@ -0,0 +1,73 @@
.app-title {
font-size: 24px;
}
.box-title {
font-size: 20px;
}
.box-container {
box-sizing: border-box;
height: 300px;
max-width: 90%;
max-height: 90%;
padding: 24px;
margin: 24px auto;
border-radius: 4px;
color: #555;
background-color: #eee;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.18),
0 6px 6px rgba(0, 0, 0, 0.25);
}
.info-container {
padding: 12px 16px;
line-height: 24px;
}
.action-container,
.content-container {
position: relative;
overflow: auto;
height: 200px;
min-height: 0;
padding: 16px;
margin: 8px 16px;
border-radius: 4px;
background-color: #fff;
}
.vertical-container,
.horizontal-container {
min-height: 0 !important;
}
.action-button {
box-sizing: border-box;
width: calc(100% - 16px);
min-height: 35px;
padding: 4px 16px;
margin: 8px;
border: 1px solid #555;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
line-height: 14px;
text-align: center;
}
.action-button:hover {
color: #fff;
background-color: #555;
}
.dropzone-container {
height: 100%;
}

View File

@ -1,41 +1,54 @@
<div class="container-fluid"> <div class="container-fluid">
<div *ngIf="mainFolder"> <div *ngIf="mainFolder">
<p> Path : {{mainFolder.path}}</p> <p> Path : {{mainFolder.path}}</p>
<p> Vous êtes dans le dossier : {{mainFolder.name}}</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> <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> </div>
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false"> <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> <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
</button> </button>
<div class="md-form input-group" *ngIf="isClickCreateFolder === true"> <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
<div class="input-group-btn"> <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> <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
</div> </div>
<input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder"> <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
</div> </div>
<!--
<label class="btn btn-danger btn-sm" mdbTooltip="Choisir fichier" placement="top" > <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> <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)"> <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
</label> </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>-->
<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> <div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
<label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label> <div class="horizontal-container" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="stretch" fxFlex="auto">
</div> <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
<table class="table table-striped"> <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> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Nom</th> <th>Nom</th>
<th>Taille</th> <th>Taille</th>
<th>Type</th> <th>Type</th>
<th>Date d'ajout</th> <th>Date d'ajout</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -59,15 +72,15 @@
<i class="fa fa-folder-open-o" aria-hidden="true"></i> <i class="fa fa-folder-open-o" aria-hidden="true"></i>
</tr> </tr>
<tr *ngFor="let file of allUserFile; let i = index;"> <tr *ngFor="let file of allUserFile; let i = index;">
<td> <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> <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=""> <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"> <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> <i class="fa fa-download" aria-hidden="true"></i>
</button> </button>
</a> </a>
</td> </td>
<td> <td>
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)"> <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> <i class="fa fa-pencil prefix"></i>
@ -80,14 +93,14 @@
<td>{{ file.type }}</td> <td>{{ file.type }}</td>
<td>{{ file.lastDate }}</td> <td>{{ file.lastDate }}</td>
<div *ngIf="file.type === ('image/jpeg')"> <div *ngIf="file.type === ('image/jpeg')">
<img [src]=file.url class="img-fluid flex-center" width="350" height="200"> <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
</div> </div>
<div *ngIf="file.type === ('image/png')"> <div *ngIf="file.type === ('image/png')">
<img [src]=file.url class="img-fluid flex-center" width="350" height="200"> <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
</div> </div>
<div *ngIf="file.type === ('application/pdf')"> <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" <object [data]=file.urlSafe type="application/pdf"
width="350" height="200" typemustmatch> width="350" height="200" typemustmatch>
</object> </object>
@ -96,15 +109,15 @@
<!--<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: 350px"> <vg-player style="height: 200px; width: 350px">
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls> <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source [src]=file.url type="video/mp4"> <source [src]=file.urlSafe type="video/mp4">
</video> </video>
</vg-player> </vg-player>
</div> </div>
<div *ngIf="file.type === ('text/plain')"> <div *ngIf="file.type === ('text/plain')">
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div> <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div> <div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>--> <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
<object [data]=file.url type="text/plain" <object [data]=file.urlSafe type="text/plain"
width="350" height="200" typemustmatch> width="350" height="200" typemustmatch>
</object> </object>
</div> </div>
@ -117,7 +130,7 @@
<div>{{test}}</div> <div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>--> <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
</div> </div>
<div *ngIf="file.type === ('audio/mp3')"> <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
<!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>--> <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
<vg-player style="height: 50px; width: 350px"> <vg-player style="height: 50px; width: 350px">
<vg-controls> <vg-controls>
@ -138,11 +151,14 @@
</vg-controls> </vg-controls>
<audio #media [vgMedia]="media" id="myAudio" preload="auto"> <audio #media [vgMedia]="media" id="myAudio" preload="auto">
<source [src]=file.url type="audio/mp3"> <source [src]=file.urlSafe type="audio/mp3">
</audio> </audio>
</vg-player> </vg-player>
</div> </div>
</tr> </tr>
</tbody>
</table>
</tbody>
</table>

View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -10,6 +10,11 @@ import * as formData from 'form-data';
import {forEach} from '@angular/router/src/utils/collection'; import {forEach} from '@angular/router/src/utils/collection';
import {type} from 'os'; import {type} from 'os';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
//import { Dropzone } from 'dropzone';
import { DropzoneComponent , DropzoneDirective,
DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
@Component({ @Component({
selector: 'app-book', selector: 'app-book',
@ -29,13 +34,101 @@ export class BookComponent implements OnInit, OnDestroy {
inputCreateFolder: String; inputCreateFolder: String;
reader: FileReader; reader: FileReader;
test: String; test: String;
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public sanitizer: DomSanitizer) { previewNode:any;
previewTemplate:any;
// config: DropzoneConfigInterface;
//myDropzone: Dropzone;
droptestt:any;
public type: string = 'component';
public disabled: boolean = false;
public config: DropzoneConfigInterface = {
clickable: true,
maxFiles: 1,
autoReset: null,
errorReset: null,
cancelReset: null
};
@ViewChild(DropzoneComponent) componentRef?: DropzoneComponent;
@ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective;
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public sanitizer: DomSanitizer) {
this.isClickCreateFolder = false; this.isClickCreateFolder = false;
this.fileChooseName = 'None'; this.fileChooseName = 'None';
this.filesToUpload = []; this.filesToUpload = [];
this.test = ''; this.test = '';
/*
if(document){
var myDropzone = new Dropzone('div#madrop', { url: '../../../public/'});
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
myDropzone.options.madrop = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
console.log('Naha, you don\'t.');
if (file.name == "justinbieber.jpg") {
console.log('Naha, you don\'t.');
done('Naha, you don\'t.');
}
else { console.log('done();') }
}
};
}
*/
} }
public toggleType(): void {
this.type = (this.type === 'component') ? 'directive' : 'component';
}
public toggleDisabled(): void {
this.disabled = !this.disabled;
}
public toggleAutoReset(): void {
this.config.autoReset = this.config.autoReset ? null : 5000;
this.config.errorReset = this.config.errorReset ? null : 5000;
this.config.cancelReset = this.config.cancelReset ? null : 5000;
}
public toggleMultiUpload(): void {
this.config.maxFiles = this.config.maxFiles ? 0 : 1;
}
public toggleClickAction(): void {
this.config.clickable = !this.config.clickable;
}
public resetDropzoneUploads(): void {
if (this.type === 'directive' && this.directiveRef) {
this.directiveRef.reset();
} else if (this.type === 'component' && this.componentRef && this.componentRef.directiveRef) {
this.componentRef.directiveRef.reset();
}
}
public onUploadError(args: any): void {
console.log('onUploadError:', args);
}
public onUploadSuccess(args: any): void {
console.log('onUploadSuccess:', JSON.stringify(args[0]));
this.filesToUpload = args;
this.fileChooseName = args[0].name;
console.log('this.fileChooseName:', this.fileChooseName);
this.upload();
this.resetDropzoneUploads();
this.openFolder(this.mainFolder.path);
}
ngOnInit() { ngOnInit() {
this.httpOptions = { this.httpOptions = {
headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken') }), headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken') }),
@ -80,6 +173,7 @@ export class BookComponent implements OnInit, OnDestroy {
} }
saveURLFileMongo(fileToCreateURL){ saveURLFileMongo(fileToCreateURL){
fileToCreateURL.url = '../../../public/' + fileToCreateURL._id.toString() + this.getStringExtention(fileToCreateURL); fileToCreateURL.url = '../../../public/' + fileToCreateURL._id.toString() + this.getStringExtention(fileToCreateURL);
// fileToCreateURL.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(fileToCreateURL.url).toString();
this.http.post('/api/saveURLFileMongo', fileToCreateURL).subscribe(data => { this.http.post('/api/saveURLFileMongo', fileToCreateURL).subscribe(data => {
console.log('data : ' + data); console.log('data : ' + data);
@ -99,8 +193,20 @@ export class BookComponent implements OnInit, OnDestroy {
this.allUserFile = files; this.allUserFile = files;
for (let f of this.allUserFile) { for (let f of this.allUserFile) {
f.data = f.url; if(f.type === ('image/jpeg') || f.type === ('image/png')){
f.url = this.sanitizer.bypassSecurityTrustResourceUrl(f.url); console.log('f : ' + JSON.stringify(f));
f.data = f.url;
console.log('f.url : ' + f.url);
f.urlSafe = this.sanitizer.bypassSecurityTrustUrl(f.url);
console.log('f.urlSafe : ' + JSON.stringify(f.urlSafe));
}else{
console.log('f : ' + JSON.stringify(f));
f.data = f.url;
console.log('f.url : ' + f.url);
f.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(f.url);
console.log('f.urlSafe : ' + JSON.stringify(f.urlSafe));
}
} }
} else { } else {
this.allUserFile = []; this.allUserFile = [];
@ -168,13 +274,15 @@ export class BookComponent implements OnInit, OnDestroy {
} }
upload() { upload() {
var me = this;
if(this.mainFolder !== undefined){ 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(), url: ''}).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: '', urlSafe: ''}).subscribe(resp => {
this.saveURLFileMongo(resp); me.saveURLFileMongo(resp);
this.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => { var mee = this;
this.getfiles(); me.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => {
this.filesToUpload = null; mee.getfiles();
this.fileChooseName = 'None'; mee.filesToUpload = null;
mee.fileChooseName = 'None';
}, (error) => { }, (error) => {
console.error(error); console.error(error);
}); });
@ -189,6 +297,7 @@ export class BookComponent implements OnInit, OnDestroy {
this.fileChooseName = this.filesToUpload[0].name; this.fileChooseName = this.filesToUpload[0].name;
} }
makeFileRequest(url: string, params: Array<string>, files: Array<File>, monFile: any) { makeFileRequest(url: string, params: Array<string>, files: Array<File>, monFile: any) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var formData: any = new FormData(); var formData: any = new FormData();

View File

@ -17,6 +17,7 @@
<mdb-root></mdb-root> <mdb-root></mdb-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<script src="./path/to/dropzone.js"></script>
<script> <script>
new WOW().init(); new WOW().init();
</script> </script>