drag and drop zone
This commit is contained in:
parent
d8c540d151
commit
147a1d4d7d
@ -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
13
package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -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 */
|
||||||
|
@ -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 ]
|
||||||
})
|
})
|
||||||
|
@ -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%;
|
||||||
|
}
|
@ -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>
|
|
@ -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();
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user