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