ngx-drop-file-image
Version:
You need to have Bootstrap 4 to 4.5 in your project
52 lines • 9.75 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../directives/drop-image-file.directive";
import * as i2 from "@angular/common";
export class DropImageFileComponent {
constructor() {
this.images = [];
this.imgFiles = new EventEmitter();
this.lang = "";
this.mouseHover = false;
this.validLang = false;
}
ngOnInit() {
if (this.lang === 'en') {
this.validLang = true;
}
else {
this.validLang = false;
}
}
uploadImage(event) {
const file = event.target.files[0];
const urlImage = URL.createObjectURL(file);
const newImg = {
file,
urlImage
};
this.images.push(newImg);
this.imgFiles.emit(this.images);
}
getImages(images) {
this.images = [...images];
this.imgFiles.emit(this.images);
}
}
DropImageFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropImageFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DropImageFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DropImageFileComponent, selector: "drop-image-file", inputs: { images: "images", lang: "lang" }, outputs: { imgFiles: "imgFiles" }, ngImport: i0, template: "<div appNgDropImages class=\"imgUpload mx-auto\" [images]=\"images\" (filesImage)=\"getImages($event)\"\n (mouseHover)=\"mouseHover = $event\" [ngClass]=\"{ 'overBox': mouseHover }\">\n <label class=\"text-center custom-content\" for=\"upload\">\n <i class=\"colorIconUpload\">\n <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"cloud-upload-alt\"\n class=\"svg-inline--fa fa-cloud-upload-alt fa-w-20\" role=\"img\" viewBox=\"0 0 640 512\">\n <path fill=\"currentColor\" d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 \n 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 \n 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 \n 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 \n 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 \n 27.3-11.3 27.3z\">\n </path>\n </svg>\n </i>\n <p *ngIf=\"validLang === false\" class=\"image-text text-center\">Presione clic o arrastre las im\u00E1genes</p>\n <p *ngIf=\"validLang\" class=\"image-text text-center\">Click or drag the images</p>\n </label>\n <input id=\"upload\" type=\"file\" accept=\".jpg,.jpeg,.png\" class=\"d-none\" (change)=\"uploadImage($event)\">\n</div>", styles: [".imgUpload{min-width:100%;height:100%;padding:10px;background-color:#fffdfd;border:2px dashed grey;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.overBox{border:2px dotted #1e90ff}.custom-content{cursor:pointer;margin-bottom:0}.colorIconUpload{color:#777474}svg{width:50%}.image-text{font-size:11px}"], directives: [{ type: i1.DropImageFileDirective, selector: "[appNgDropImages]", inputs: ["images"], outputs: ["filesImage", "mouseHover"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DropImageFileComponent, decorators: [{
type: Component,
args: [{
selector: 'drop-image-file',
templateUrl: './drop-image-file.component.html',
styleUrls: ['./drop-image-file.component.css']
}]
}], ctorParameters: function () { return []; }, propDecorators: { images: [{
type: Input
}], imgFiles: [{
type: Output
}], lang: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcC1pbWFnZS1maWxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kcm9wLWZpbGUtaW1hZ2Uvc3JjL2xpYi9tb2R1bGVzL2Ryb3AtaW1hZ2UtZmlsZS9kcm9wLWltYWdlLWZpbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRyb3AtZmlsZS1pbWFnZS9zcmMvbGliL21vZHVsZXMvZHJvcC1pbWFnZS1maWxlL2Ryb3AtaW1hZ2UtZmlsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUy9FLE1BQU0sT0FBTyxzQkFBc0I7SUFRakM7UUFQUyxXQUFNLEdBQWlCLEVBQUUsQ0FBQztRQUN6QixhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDN0MsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNuQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGNBQVMsR0FBRyxLQUFLLENBQUM7SUFJbEIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1NBQ3ZCO2FBQU07WUFDTCxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztTQUN4QjtJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsS0FBVTtRQUNwQixNQUFNLElBQUksR0FBUyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN6QyxNQUFNLFFBQVEsR0FBRyxHQUFHLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzNDLE1BQU0sTUFBTSxHQUFlO1lBQ3pCLElBQUk7WUFDSixRQUFRO1NBQ1QsQ0FBQztRQUNGLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsU0FBUyxDQUFDLE1BQW9CO1FBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxDQUFDO1FBQzFCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDOzttSEFqQ1Usc0JBQXNCO3VHQUF0QixzQkFBc0Isc0lDVG5DLCsrQ0FtQk07MkZEVk8sc0JBQXNCO2tCQUxsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFdBQVcsRUFBRSxrQ0FBa0M7b0JBQy9DLFNBQVMsRUFBRSxDQUFDLGlDQUFpQyxDQUFDO2lCQUMvQzswRUFFVSxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksUUFBUTtzQkFBakIsTUFBTTtnQkFDRSxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJRmlsZUltYWdlIH0gZnJvbSAnLi8uLi8uLi9zaGFyZWQvSW50ZXJmYWNlcy9pbnRlcmZhY2VzJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkcm9wLWltYWdlLWZpbGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcC1pbWFnZS1maWxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHJvcC1pbWFnZS1maWxlLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEcm9wSW1hZ2VGaWxlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgaW1hZ2VzOiBJRmlsZUltYWdlW10gPSBbXTtcbiAgQE91dHB1dCgpIGltZ0ZpbGVzID0gbmV3IEV2ZW50RW1pdHRlcjxJRmlsZUltYWdlW10+KCk7XG4gIEBJbnB1dCgpIGxhbmcgPSBcIlwiO1xuICBtb3VzZUhvdmVyID0gZmFsc2U7XG4gIHZhbGlkTGFuZyA9IGZhbHNlO1xuXG5cbiAgY29uc3RydWN0b3IoKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5sYW5nID09PSAnZW4nKSB7XG4gICAgICB0aGlzLnZhbGlkTGFuZyA9IHRydWU7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudmFsaWRMYW5nID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgdXBsb2FkSW1hZ2UoZXZlbnQ6IGFueSkge1xuICAgIGNvbnN0IGZpbGU6IEZpbGUgPSBldmVudC50YXJnZXQuZmlsZXNbMF07XG4gICAgY29uc3QgdXJsSW1hZ2UgPSBVUkwuY3JlYXRlT2JqZWN0VVJMKGZpbGUpO1xuICAgIGNvbnN0IG5ld0ltZzogSUZpbGVJbWFnZSA9IHtcbiAgICAgIGZpbGUsXG4gICAgICB1cmxJbWFnZVxuICAgIH07XG4gICAgdGhpcy5pbWFnZXMucHVzaChuZXdJbWcpO1xuICAgIHRoaXMuaW1nRmlsZXMuZW1pdCh0aGlzLmltYWdlcyk7XG4gIH1cblxuICBnZXRJbWFnZXMoaW1hZ2VzOiBJRmlsZUltYWdlW10pIHtcbiAgICB0aGlzLmltYWdlcyA9IFsuLi5pbWFnZXNdO1xuICAgIHRoaXMuaW1nRmlsZXMuZW1pdCh0aGlzLmltYWdlcyk7XG4gIH1cbn1cbiIsIjxkaXYgYXBwTmdEcm9wSW1hZ2VzIGNsYXNzPVwiaW1nVXBsb2FkIG14LWF1dG9cIiBbaW1hZ2VzXT1cImltYWdlc1wiIChmaWxlc0ltYWdlKT1cImdldEltYWdlcygkZXZlbnQpXCJcbiAgICAobW91c2VIb3Zlcik9XCJtb3VzZUhvdmVyID0gJGV2ZW50XCIgW25nQ2xhc3NdPVwieyAnb3ZlckJveCc6IG1vdXNlSG92ZXIgfVwiPlxuICAgIDxsYWJlbCBjbGFzcz1cInRleHQtY2VudGVyIGN1c3RvbS1jb250ZW50XCIgZm9yPVwidXBsb2FkXCI+XG4gICAgICAgIDxpIGNsYXNzPVwiY29sb3JJY29uVXBsb2FkXCI+XG4gICAgICAgICAgICA8c3ZnIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGZvY3VzYWJsZT1cImZhbHNlXCIgZGF0YS1wcmVmaXg9XCJmYXNcIiBkYXRhLWljb249XCJjbG91ZC11cGxvYWQtYWx0XCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInN2Zy1pbmxpbmUtLWZhIGZhLWNsb3VkLXVwbG9hZC1hbHQgZmEtdy0yMFwiIHJvbGU9XCJpbWdcIiB2aWV3Qm94PVwiMCAwIDY0MCA1MTJcIj5cbiAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPVwiY3VycmVudENvbG9yXCIgZD1cIk01MzcuNiAyMjYuNmM0LjEtMTAuNyA2LjQtMjIuNCA2LjQtMzQuNiAwLTUzLTQzLTk2LTk2LTk2LTE5LjcgMC0zOC4xIDYtNTMuMyAxNi4yQzM2NyBcbiAgICAgICAgICAgICAgICAgICAgNjQuMiAzMTUuMyAzMiAyNTYgMzJjLTg4LjQgMC0xNjAgNzEuNi0xNjAgMTYwIDAgMi43LjEgNS40LjIgOC4xQzQwLjIgMjE5LjggMCAyNzMuMiAwIDMzNmMwIFxuICAgICAgICAgICAgICAgICAgICA3OS41IDY0LjUgMTQ0IDE0NCAxNDRoMzY4YzcwLjcgMCAxMjgtNTcuMyAxMjgtMTI4IDAtNjEuOS00NC0xMTMuNi0xMDIuNC0xMjUuNHpNMzkzLjQgXG4gICAgICAgICAgICAgICAgICAgIDI4OEgzMjh2MTEyYzAgOC44LTcuMiAxNi0xNiAxNmgtNDhjLTguOCAwLTE2LTcuMi0xNi0xNlYyODhoLTY1LjRjLTE0LjMgXG4gICAgICAgICAgICAgICAgICAgIDAtMjEuNC0xNy4yLTExLjMtMjcuM2wxMDUuNC0xMDUuNGM2LjItNi4yIDE2LjQtNi4yIDIyLjYgMGwxMDUuNCAxMDUuNGMxMC4xIDEwLjEgMi45IFxuICAgICAgICAgICAgICAgICAgICAyNy4zLTExLjMgMjcuM3pcIj5cbiAgICAgICAgICAgICAgICA8L3BhdGg+XG4gICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgPC9pPlxuICAgICAgICA8cCAqbmdJZj1cInZhbGlkTGFuZyA9PT0gZmFsc2VcIiBjbGFzcz1cImltYWdlLXRleHQgdGV4dC1jZW50ZXJcIj5QcmVzaW9uZSBjbGljIG8gYXJyYXN0cmUgbGFzIGltw6FnZW5lczwvcD5cbiAgICAgICAgPHAgKm5nSWY9XCJ2YWxpZExhbmdcIiBjbGFzcz1cImltYWdlLXRleHQgdGV4dC1jZW50ZXJcIj5DbGljayBvciBkcmFnIHRoZSBpbWFnZXM8L3A+XG4gICAgPC9sYWJlbD5cbiAgICA8aW5wdXQgaWQ9XCJ1cGxvYWRcIiB0eXBlPVwiZmlsZVwiIGFjY2VwdD1cIi5qcGcsLmpwZWcsLnBuZ1wiIGNsYXNzPVwiZC1ub25lXCIgKGNoYW5nZSk9XCJ1cGxvYWRJbWFnZSgkZXZlbnQpXCI+XG48L2Rpdj4iXX0=