I am using angular-file npm file package to upload file (https://www.npmjs.com/package/angular-file) . I want to know how do we directly call the method after we browse files ?
When I browse files and click open it will automatically check the progress and will upload the file without clicking any submit or any buttons any other buttons , it will upload after browsing the files.
How do we call the uploadFile after click the browse file and opening the file? I tried adding (change)=”handleFileInput($event.target.files)” but it does not seem to work. Any idea guys ? Thank you.
#html code
<div ngfDrop class="well my-drop-zone drop-box" selectable="selectable"
[(validDrag)]="baseDropValid" (fileOver)="hasBaseDropZoneOver=$event" [(files)]="files"
[accept]="accept" [maxSize]="maxSize" [(dragFiles)]="dragFiles" [(lastInvalids)]="lastInvalids"
class="well my-drop-zone drop-box" [class.invalid-drag]="baseDropValid===false"
[class.valid-drag]="baseDropValid" [fileDropDisabled]="fileDropDisabled"
[class.invalid-drag]="baseDropValid===false" [class.valid-drag]="baseDropValid"
[ngfFixOrientation]="false">
<div id="file-drop-area">
<span class="material-icons material-icons-outlined tertiary-text"
style="font-size: 36px;margin-bottom:33px;">
cloud_upload
</span>
<div class="mb-8px">
<span style="font-size:14px;">Drag and drop files here or </span>
<span (click)="ok()"class="primary-color cursor-pointer"
style="font-weight: 500;font-size:14px;">browse
files</span>
</div>
<div class="secondary-text mt-10px fs-12px">Accepted file size should not exceed 20MB.
</div>
<div class="mat-error error-file-drop">
</div>
</div>
</div>
<div fxLayout="column" style="padding-top: 25px;" *ngIf="files.length > 0">
<div *ngFor="let item of files;let i=index">
<div fxLayout="row" style="padding-bottom:8px" layout-wrap>
<mat-icon style="font-size: 20px;" color="primary">description</mat-icon>
<span class="primary-color" style="font-size:14px; margin-right:8px"
matTooltip="{{item.name}}">{{item.name | truncatedotted:[25]
}}</span>
<span style="font-size:12px; margin-right: 6px;" class="tertiary-text">{{
item.size/1024 |
number:'1.0-0' }} kb</span>
<span style="flex:1 1"></span>
<span (click)="removeFile(files, i)" class="material-icons remove-file cursor-pointer"
style="color:indianred;margin-right:10px">
close
</span>
</div>
</div>
</div>
<div style="padding-bottom:16px;">
</div>
</mat-card>
</div>
#ts code
uploadFile(payload:any) {
const formData: FormData = new FormData();
this.files.map((file) => {
formData.append('attachment', file, file.name);
});
this._inspectionService.uploadCSV(formData)
.pipe(debounceTime(500))
.subscribe(
res=>{
if(res.isSuccess){
}
},
err=>{
AppUtils.errorHandler(err,this._notificationService, this.dialog);
}
)
}