У меня есть компонент кнопки в моем navbar.component.html
, как показано ниже.Я хотел бы смоделировать и вызвать нажатие кнопки Upload
из navbar.component.ts file
.Когда я нажимаю кнопку Upload
, он автоматически открывает селектор файлов, например, на моем Mac, он находит.Затем я выбираю файл, и он загружается в бэкэнд.Я хочу добиться того же действия, но используя машинописный код.Поэтому я просто хочу смоделировать, так как пользователь нажмет кнопку «Загрузить», что приведет к открытию селектора файлов, и тогда все остальные действия будут такими же, как и при нажатии кнопки.Есть идеи, почему это не работает?Я сделал все, как было показано здесь .
В navbar.component.ts:
event.preventDefault();
let element: HTMLElement = document.getElementById('trigger') as HTMLElement;
element.click()
Я также попробовал:
@ViewChild('myTrigger') myTrigger: ElementRef;
this.myTrigger.nativeElement.click();
let el: HTMLElement = this.myTrigger.nativeElement as HTMLElement;
el.click();
uploadFile():
uploadFile(){
this.UploaderService.uploader = new FileUploader({url: URL + localStorage.getItem('current_path') + '/', autoUpload: true , itemAlias: 'file', authToken: 'token ' + localStorage.getItem('userToken')});
this.UploaderService.uploader.onCompleteItem = (item:any, response:any , status:any, headers:any) => {
this.UploaderService.displayAllFiles();
this.ExecuteWhenSidebarClose();
}
this.UploaderService.uploader.onBeforeUploadItem = (item) => {
item.withCredentials = false;
}
this.UploaderService.uploader.onAfterAddingFile = (item) => {
// item.method = "PUT";
item.withCredentials = false;
}
}
В navbar.component.html:
<li class='nav-item sidebar-false-upload' *ngIf="isCloud() && !sidebarVisible">
<label #myTrigger id="trigger" (click)="this.uploadFile()" data-toggle="collapse" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"
class="pretty-file nav-link">
<i class="nc-icon nc-cloud"></i>Upload
<div id="fileSelector">
<input type="file" name="fileUplaod" id="fileUpload" multiple ng2FileSelect [uploader]="this.UploaderService.uploader">
</div>
</label>
</li>