mz-file-upload
v0.0.6
Published
Библиотека для ангуляра, для организации загрузки файла
Downloads
6
Readme
##Описание Библиотека для ангуляра, для организации загрузки файла
Установка
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MzFileUploadModule} from "mz-file-upload";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
/*
подключаем тут наш модуль
*/
MzFileUploadModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Пример
<!-- Даем кнопке функционал загрузки файлов -->
<div class="class2">
<i mzFileInput
(mzFileUpload)="fileChange($event)"
[mzFileId]="123">
ЗАГРУЗИТЬ ФАЙЛ
</i>
</div>
<!-- Даем кнопке функционал загрузки через перетакскивание -->
<div class="drop-zone"
mzFileDrop
[mzFileId]="123"
(mzFileHovered)="changeStateFileDrop($event)">
{{fileDrop ? 'HOVER' : 'NOT'}}
</div>
<div class="drop-zone d2"
mzFileDrop
[mzFileId]="123"
(mzFileHovered)="fileDrop2 = $event">
<div *ngIf="fileDrop2" class="d2Block"></div>
</div>
import {Component, OnInit} from '@angular/core';
import {MzFileUploadService} from "mz-file-upload";;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'my-app';
fileDrop = false;
fileDrop2 = false;
constructor (
private mzFileUpload: MzFileUploadService
)
{
}
ngOnInit(): void {
/** обновление статуса */
this.mzFileUpload.updateStateOfView(
{
id: 1235
},
false
);
/** получение файлов поссле загрузки */
this.mzFileUpload.getFile(
{
id: 123
}
).subscribe(
(event) => {
console.log(
'mzFileUpload - getFile',
event
);
}
)
}
public fileChange (event) {
console.log(
'fileChange',
event
);
}
public changeStateFileDrop (event) {
console.log(
'changeStateFileDrop',
event
);
this.fileDrop = event;
}
}