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

@ -37,7 +37,11 @@ var FileMongoShema = new Schema({
url: {
type: String,
unique: false
}
},
urlSafe: {
type: String,
unique: false
},
});
module.exports = mongoose.model('FileMongo', FileMongoShema);

13
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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){
console.log('bebeb : ' + JSON.stringify(req));
res.send(req.files);
});
/* Get utilisateur courant */

View File

@ -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 ]
})

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,4 +1,4 @@
<div class="container-fluid">
<div class="container-fluid">
<div *ngIf="mainFolder">
<p> Path : {{mainFolder.path}}</p>
<p> Vous êtes dans le dossier : {{mainFolder.name}}</p>
@ -19,16 +19,29 @@
<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>-->
<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>
<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>
<table class="table table-striped">
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
@ -80,14 +93,14 @@
<td>{{ file.type }}</td>
<td>{{ file.lastDate }}</td>
<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 *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 *ngIf="file.type === ('application/pdf')">
<!--<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>
</object>
@ -96,7 +109,7 @@
<!--<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.url type="video/mp4">
<source [src]=file.urlSafe type="video/mp4">
</video>
</vg-player>
</div>
@ -104,7 +117,7 @@
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div>
<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>
</object>
</div>
@ -117,7 +130,7 @@
<div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
</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>-->
<vg-player style="height: 50px; width: 350px">
<vg-controls>
@ -138,11 +151,14 @@
</vg-controls>
<audio #media [vgMedia]="media" id="myAudio" preload="auto">
<source [src]=file.url type="audio/mp3">
<source [src]=file.urlSafe type="audio/mp3">
</audio>
</vg-player>
</div>
</tr>
</tbody>
</table>
</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 { 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;
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) {
if(f.type === ('image/jpeg') || f.type === ('image/png')){
console.log('f : ' + JSON.stringify(f));
f.data = f.url;
f.url = this.sanitizer.bypassSecurityTrustResourceUrl(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<string>, files: Array<File>, monFile: any) {
return new Promise((resolve, reject) => {
var formData: any = new FormData();

View File

@ -17,6 +17,7 @@
<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/web-animations/2.2.2/web-animations.min.js"></script>
<script src="./path/to/dropzone.js"></script>
<script>
new WOW().init();
</script>