From 147a1d4d7d3006bb86c0932a98309b631704fc14 Mon Sep 17 00:00:00 2001 From: Tmadkaud Date: Fri, 18 May 2018 22:07:38 +0200 Subject: [PATCH] drag and drop zone --- models/FileMongo.js | 72 +++++++++-------- package-lock.json | 13 ++++ package.json | 2 + routes/api.js | 4 +- src/app/app.module.ts | 20 ++++- src/app/book/book.component.css | 73 +++++++++++++++++ src/app/book/book.component.html | 110 +++++++++++++++----------- src/app/book/book.component.ts | 129 ++++++++++++++++++++++++++++--- src/index.html | 1 + 9 files changed, 330 insertions(+), 94 deletions(-) diff --git a/models/FileMongo.js b/models/FileMongo.js index 5dd9fd9..2f02852 100644 --- a/models/FileMongo.js +++ b/models/FileMongo.js @@ -2,42 +2,46 @@ var mongoose = require('mongoose'); var Schema = mongoose.Schema; var FileMongoShema = new Schema({ - uid: { - type: String, - unique: false - }, - name: { - type: String, - unique: false - }, - path: { - type: String, - unique: false - }, - type: { - type: String, - unique: false - }, - taille: { - type: String, - unique: false - }, - idUser: { - type: String, - unique: false - }, - owner: { - type: String, - unique: false - }, - lastDate: { - type: String, - unique: false - }, - url: { + uid: { + type: String, + unique: false + }, + name: { + type: String, + unique: false + }, + path: { + type: String, + unique: false + }, + type: { + type: String, + unique: false + }, + taille: { + type: String, + unique: false + }, + idUser: { + type: String, + unique: false + }, + owner: { + type: String, + unique: false + }, + lastDate: { + type: String, + unique: false + }, + url: { type: String, unique: false - } + }, + urlSafe: { + type: String, + unique: false + }, }); module.exports = mongoose.model('FileMongo', FileMongoShema); diff --git a/package-lock.json b/package-lock.json index bea9b22..30d3f2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5740,6 +5740,11 @@ "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": { "version": "0.0.2", "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": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", diff --git a/package.json b/package.json index 8cb4913..9b08357 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "classlist.js": "1.1.x", "core-js": "2.4.x", "del": "3.0.x", + "dropzone": "^5.4.0", "easy-pie-chart": "2.1.x", "express": "^4.16.2", "express-fileupload": "^0.4.0", @@ -48,6 +49,7 @@ "multer": "^1.3.0", "ng-html-util": "1.0.x", "ngm-cli": "0.5.x", + "ngx-dropzone-wrapper": "^6.0.0", "passport": "^0.4.0", "passport-facebook": "^2.1.1", "passport-github": "^1.1.0", diff --git a/routes/api.js b/routes/api.js index 53cdeed..45ae823 100644 --- a/routes/api.js +++ b/routes/api.js @@ -224,8 +224,8 @@ router.post('/signin', function(req, res) { /* Multer upload */ 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 */ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 889b0fd..1592931 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,10 +23,22 @@ import {VgCoreModule} from 'videogular2/core'; import {VgControlsModule} from 'videogular2/controls'; import {VgOverlayPlayModule} from 'videogular2/overlay-play'; import {VgBufferingModule} from 'videogular2/buffering'; + +// import { DropzoneModule } from 'dropzone'; // 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 = [ { path: 'main', @@ -64,6 +76,7 @@ const appRoutes: Routes = [ ], imports: [ BrowserModule, + DropzoneModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, @@ -84,7 +97,12 @@ const appRoutes: Routes = [ apiKey: 'Your_api_key' }) ], - providers: [MDBSpinningPreloader], + providers: [ + MDBSpinningPreloader, + { + provide: DROPZONE_CONFIG, + useValue: DEFAULT_DROPZONE_CONFIG + }], bootstrap: [AppComponent], schemas: [ NO_ERRORS_SCHEMA ] }) diff --git a/src/app/book/book.component.css b/src/app/book/book.component.css index e69de29..1a465ae 100644 --- a/src/app/book/book.component.css +++ b/src/app/book/book.component.css @@ -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%; +} diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html index 3a79fed..0661259 100644 --- a/src/app/book/book.component.html +++ b/src/app/book/book.component.html @@ -1,41 +1,54 @@ -
-
-

Path : {{mainFolder.path}}

-

Vous êtes dans le dossier : {{mainFolder.name}}

- -
+
+
+

Path : {{mainFolder.path}}

+

Vous êtes dans le dossier : {{mainFolder.name}}

+ +
- + -
-
- -
- -
- +
+
+ +
+ +
+ - - -
- +
+
+
+
Dropzone
+ +
+ +
+
+
+
+ + + +
- - - - - + + + + + @@ -59,15 +72,15 @@ - + + + +
- +
- +
- -
+ + + +
#NomTailleTypeDate d'ajout#NomTailleTypeDate d'ajout
- + + - - - - {{ file.type }} {{ file.lastDate }}
+ + - - \ No newline at end of file diff --git a/src/app/book/book.component.ts b/src/app/book/book.component.ts index ae9837c..7864461 100644 --- a/src/app/book/book.component.ts +++ b/src/app/book/book.component.ts @@ -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 { Router, ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs/Observable'; @@ -10,6 +10,11 @@ import * as formData from 'form-data'; import {forEach} from '@angular/router/src/utils/collection'; import {type} from 'os'; import { DomSanitizer } from '@angular/platform-browser'; +//import { Dropzone } from 'dropzone'; +import { DropzoneComponent , DropzoneDirective, + DropzoneConfigInterface } from 'ngx-dropzone-wrapper'; + + @Component({ selector: 'app-book', @@ -29,13 +34,101 @@ export class BookComponent implements OnInit, OnDestroy { inputCreateFolder: String; reader: FileReader; 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.fileChooseName = 'None'; this.filesToUpload = []; 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() { this.httpOptions = { headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken') }), @@ -80,6 +173,7 @@ export class BookComponent implements OnInit, OnDestroy { } saveURLFileMongo(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 => { console.log('data : ' + data); @@ -99,8 +193,20 @@ export class BookComponent implements OnInit, OnDestroy { this.allUserFile = files; for (let f of this.allUserFile) { - f.data = f.url; - f.url = this.sanitizer.bypassSecurityTrustResourceUrl(f.url); + if(f.type === ('image/jpeg') || f.type === ('image/png')){ + 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 { this.allUserFile = []; @@ -168,13 +274,15 @@ export class BookComponent implements OnInit, OnDestroy { } upload() { + var me = this; 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.saveURLFileMongo(resp); - this.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => { - this.getfiles(); - this.filesToUpload = null; - this.fileChooseName = 'None'; + 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 => { + me.saveURLFileMongo(resp); + var mee = this; + me.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => { + mee.getfiles(); + mee.filesToUpload = null; + mee.fileChooseName = 'None'; }, (error) => { console.error(error); }); @@ -189,6 +297,7 @@ export class BookComponent implements OnInit, OnDestroy { this.fileChooseName = this.filesToUpload[0].name; } + makeFileRequest(url: string, params: Array, files: Array, monFile: any) { return new Promise((resolve, reject) => { var formData: any = new FormData(); diff --git a/src/index.html b/src/index.html index cfcf55c..6b83a22 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,7 @@ +