easy-drag-and-drop-file-upload
Version:
Drag and Drop based file upload for Angular
260 lines (250 loc) • 14.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, Input, Output, Directive, HostBinding, HostListener, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
class EasyDragAndDropFileUploadService {
constructor() { }
}
/** @nocollapse */ EasyDragAndDropFileUploadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function EasyDragAndDropFileUploadService_Factory() { return new EasyDragAndDropFileUploadService(); }, token: EasyDragAndDropFileUploadService, providedIn: "root" });
EasyDragAndDropFileUploadService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
EasyDragAndDropFileUploadService.ctorParameters = () => [];
class EasyDragAndDropFileUploadComponent {
constructor() { }
ngOnInit() {
}
}
EasyDragAndDropFileUploadComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-easyDragAndDropFileUpload',
template: `
<p>
easy-drag-and-drop-file-upload works!
</p>
`
},] }
];
/** @nocollapse */
EasyDragAndDropFileUploadComponent.ctorParameters = () => [];
class EasyDndUploadComponent {
constructor() {
this.files = [];
/*************************************************************
* Input() memebrs
*************************************************************/
// Title
this._title = "Drag and Drop File Upload"; // default title
// Allow file types
this._allowedFiles = "*"; // Deafult allowed any type of file
// File Limit
this._fileLimit = -1; // Allow any size of file
// Multiple file
this._allowMultiple = true; // Allow multiple files by default
// Output
this.droppedFiles = new EventEmitter();
}
set title(value) {
this._title = value;
//console.log(`title is changed to ${value}`);
}
get title() {
return this._title;
}
set allowedFiles(value) {
this._allowedFiles = value;
//console.log(`Allowed files is changed to ${value}`);
}
get allowedFiles() {
return this._allowedFiles;
}
set fileLimit(value) {
this._fileLimit = value;
//console.log(`file limit is changed to ${value}`);
}
get fileLimit() {
return this._fileLimit;
}
set allowMultiple(value) {
this._allowMultiple = value;
//console.log(`allow multiple is changed to ${value}`);
}
get allowMultiple() {
return this._allowMultiple;
}
ngOnInit() { }
/**
* on file drop handler
*/
onFileDropped($event) {
this.prepareFilesList($event);
}
/**
* handle file from browsing
*/
fileBrowseHandler(files) {
this.prepareFilesList(files);
}
/**
* Delete file from files list
* @param index (File index)
*/
deleteFile(index) {
this.files.splice(index, 1);
this.droppedFiles.emit(this.files);
}
/**
* Simulate the upload process
*/
uploadFilesSimulator(index) {
setTimeout(() => {
if (index === this.files.length) {
return;
}
else {
const progressInterval = setInterval(() => {
if (this.files[index].progress === 100) {
clearInterval(progressInterval);
this.uploadFilesSimulator(index + 1);
}
else {
this.files[index].progress += 5;
}
}, 200);
this.droppedFiles.emit(this.files);
}
}, 1000);
}
/**
* Convert Files list to normal array list
* @param files (Files List)
*/
prepareFilesList(files) {
for (const item of files) {
item.progress = 0;
this.files.push(item);
}
this.uploadFilesSimulator(0);
}
/**
* format bytes
* @param bytes (File size in bytes)
* @param decimals (Decimals point)
*/
formatBytes(bytes, decimals) {
if (bytes === 0) {
return '0 Bytes';
}
const k = 1024;
const dm = decimals <= 0 ? 0 : decimals || 2;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
}
EasyDndUploadComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-easy-dnd-upload',
template: "<div style=\"text-align: center;\">\n\t<h4>{{title}}</h4>\n</div>\n<div class=\"container\" easyDnDFileUpload (fileDropped)=\"onFileDropped($event)\">\n\t<input type=\"file\" [accept]=\"allowedFiles\" #fileDropRef id=\"fileDropRef\" [multiple]=\"allowMultiple\" (change)=\"fileBrowseHandler($event.target.files)\" />\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"63\" height=\"64\" viewBox=\"0 0 63 64\">\n\t\t<g fill=\"#3B454F\" fill-rule=\"nonzero\">\n\t\t\t<path\n\t\t\t\td=\"M42.656 15.135a1.953 1.953 0 0 1-1.391-.578L31.5 4.795l-9.765 9.762a1.97 1.97 0 1 1-2.785-2.785L30.106.616a1.97 1.97 0 0 1 2.785 0l11.157 11.156a1.97 1.97 0 0 1-1.392 3.363z\" />\n\t\t\t<path\n\t\t\t\td=\"M31.5 36.791a1.97 1.97 0 0 1-1.969-1.969V2.01a1.97 1.97 0 0 1 3.938 0v32.812a1.97 1.97 0 0 1-1.969 1.969z\" />\n\t\t\t<path\n\t\t\t\td=\"M55.781 63.041H7.22A7.225 7.225 0 0 1 0 55.822V41.385a4.599 4.599 0 0 1 4.594-4.594h7.234a4.567 4.567 0 0 1 4.402 3.276l2.814 9.382a.658.658 0 0 0 .628.467h23.656a.658.658 0 0 0 .628-.467l2.814-9.385a4.572 4.572 0 0 1 4.402-3.273h7.234A4.599 4.599 0 0 1 63 41.385v14.437a7.225 7.225 0 0 1-7.219 7.219zM4.594 40.729a.656.656 0 0 0-.657.656v14.437a3.286 3.286 0 0 0 3.282 3.282H55.78a3.286 3.286 0 0 0 3.282-3.282V41.385a.656.656 0 0 0-.657-.656h-7.234a.65.65 0 0 0-.628.467L47.73 50.58a4.628 4.628 0 0 1-4.402 3.274H19.672a4.567 4.567 0 0 1-4.402-3.276l-2.814-9.382a.65.65 0 0 0-.628-.467H4.594z\" />\n\t\t</g>\n\t</svg>\n\n\t<h3>Drag and drop file/'s here</h3>\n\t<h3>or</h3>\n\t<label for=\"fileDropRef\">Browse File</label>\n</div>\n<div class=\"files-list\">\n\t<div class=\"single-file\" *ngFor=\"let file of files; let i = index\">\n\t\t<div class=\"file-icon\" style=\"width: 50px\">\n\t\t\t<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\t\t\t\tx=\"0px\" y=\"0px\" viewBox=\"0 0 58 58\" style=\"enable-background:new 0 0 58 58;\" xml:space=\"preserve\">\n\t\t\t\t<polygon style=\"fill:#EDEADA;\" points=\"51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 \" />\n\t\t\t\t<g>\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z\" />\n\t\t\t\t\t<path style=\"fill:#CEC9AE;\"\n\t\t\t\t\t\td=\"M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z\" />\n\t\t\t\t</g>\n\t\t\t\t<polygon style=\"fill:#CEC9AE;\" points=\"37.5,0 37.5,14 51.5,14 \" />\n\t\t\t</svg>\n\t\t</div>\n\t\t<div class=\"info\">\n\t\t\t<h4 class=\"name\">\n\t\t\t\t{{ file?.name }}\n\t\t\t</h4>\n\t\t\t<p class=\"size\">\n\t\t\t\t{{ formatBytes(file?.size, 0) }}\n\t\t\t</p>\n\t\t\t<easy-progress [progress]=\"file?.progress\"></easy-progress>\n\t\t</div>\n\n\t\t<div class=\"delete\" (click)=\"deleteFile(i)\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\n\t\t\t\t<path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\n\t\t\t\t\td=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</div>\n",
styles: [".container{width:450px;height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{-webkit-animation:shake 1s;animation:shake 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #979797;margin-bottom:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"]
},] }
];
/** @nocollapse */
EasyDndUploadComponent.ctorParameters = () => [];
EasyDndUploadComponent.propDecorators = {
title: [{ type: Input }],
allowedFiles: [{ type: Input }],
fileLimit: [{ type: Input }],
allowMultiple: [{ type: Input }],
droppedFiles: [{ type: Output }]
};
class ProgressComponent {
constructor() {
this.progress = 0;
}
ngOnInit() { }
}
ProgressComponent.decorators = [
{ type: Component, args: [{
selector: 'easy-progress',
template: "<div class=\"progress-cont\">\n <div class=\"progress\" [style.width]=\"progress + '%'\">\n </div>\n</div>",
styles: [".progress-cont{height:7px;width:100%;border-radius:4px;background-color:#d0d0d0;position:relative}.progress-cont .progress{width:0;height:100%;position:absolute;z-index:1;top:0;left:0;border-radius:4px;background-color:#4c97cb;transition:.5s all}\n"]
},] }
];
/** @nocollapse */
ProgressComponent.ctorParameters = () => [];
ProgressComponent.propDecorators = {
progress: [{ type: Input }]
};
class EasyDragAndDropFileUploadDirective {
constructor() {
this.fileDropped = new EventEmitter();
}
// Dragover listener
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = true;
}
// Dragleave listener
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = false;
}
// Drop listener
ondrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = false;
let files = evt.dataTransfer.files;
if (files.length > 0) {
this.fileDropped.emit(files);
}
}
}
EasyDragAndDropFileUploadDirective.decorators = [
{ type: Directive, args: [{
selector: '[easyDnDFileUpload]'
},] }
];
EasyDragAndDropFileUploadDirective.propDecorators = {
fileOver: [{ type: HostBinding, args: ['class.fileover',] }],
fileDropped: [{ type: Output }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
ondrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
};
class EasyDragAndDropFileUploadModule {
}
EasyDragAndDropFileUploadModule.decorators = [
{ type: NgModule, args: [{
declarations: [
EasyDndUploadComponent,
EasyDragAndDropFileUploadComponent,
EasyDragAndDropFileUploadDirective,
ProgressComponent
],
imports: [
CommonModule,
BrowserModule,
FormsModule
],
exports: [
EasyDragAndDropFileUploadComponent,
EasyDndUploadComponent
]
},] }
];
/*
* Public API Surface of easy-drag-and-drop-file-upload
*/
/**
* Generated bundle index. Do not edit.
*/
export { EasyDndUploadComponent, EasyDragAndDropFileUploadComponent, EasyDragAndDropFileUploadModule, EasyDragAndDropFileUploadService, EasyDragAndDropFileUploadDirective as ɵa, ProgressComponent as ɵb };
//# sourceMappingURL=easy-drag-and-drop-file-upload.js.map