Я пытаюсь добавить ng2-file-upload в качестве пользовательской директивы без указания параметров в нескольких местах. Я решил создать директиву, которая может сделать это для меня, и я буду использовать ее в зависимости от сценария ios. Я не могу сделать эту работу.
Stackblitz: https://stackblitz.com/edit/angular-jopscg
Вот как я планирую назвать
<div>
Attachments
<input type="file" appAttachments [proxy]="proxy" name="fileInput" multiple #fileInput />
<div>
<mat-icon #proxy>attachment</mat-icon>
</div>
</div>
В директиве
import { Directive, ElementRef, HostBinding, Renderer2, Input, OnInit } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';
@Directive({
selector: '[appAttachments]'
})
export class AttachmentsDirective implements OnInit {
@HostBinding('attr.ng2FileSelect')
ng2FileSelect = new FileSelectDirective(this.el);
@HostBinding('attr.uploader')
uploader: FileUploader = new FileUploader({
url: `/api/upload`,
itemAlias: 'fileInput'
});
@HostBinding('style.display')
display = 'none';
fileHtml = `<input type="file" hidden name="fileInput" ng2FileSelect [uploader]="uploader" #fileInput multiple/>`;
@Input()
proxy: any = null;
constructor(
private el: ElementRef,
private renderer: Renderer2,
) {
console.log(this.proxy)
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
this.uploader.uploadAll();
console.log('hi')
};
this.uploader.onCompleteItem = (req: any, res: any) => {
console.log(req, res);
};
}
ngOnInit() {
this.ng2FileSelect.uploader = this.uploader;
this.ng2FileSelect.onChange();
if (this.proxy) {
this.renderer.listen(this.proxy._elementRef.nativeElement, 'click', (event) => {
this.el.nativeElement.click();
});
}
}
}
Реальная идея заключалась в том, чтобы использовать его следующим образом: добавить элемент файла в Dom, используя структурную директиву или что-то подобное.
<div>
Attachments
<!--inject file element dynamically-->
<div>
<mat-icon *appAttachments>attachment</mat-icon>
</div>
</div>