Clash Royale CLAN TAG#URR8PPP

how to get the uploaded file url and name in ngx-input-file

How to get the file name after drag and drop the image in angular ngx-input-file.

Please look at the below example,

stackblitz

Here after select or drag and drop the image , how to get that dropped image name and path. I want that image url.

2 Answers
2

You are able to retrieve file metadata. The InputFileComponent class exposes a files array as a public property. Each file in the array in turn has the following properties:

InputFileComponent

files

file

I created a demo based on the link you gave, for you to play around with. Just run the demo, drop an image and then click on the text that says "Log files" and the data will show up in the console. Please adapt the code to suit your purposes.

HTML

<!-- app.component.html -->
<mat-toolbar color="primary">
<div class="container">
<a (click)="logFiles()"> Log files </a>
</div>
</mat-toolbar>
<!-- etc. -->


TypeScript

// app.component.ts
import Component, ViewChild from '@angular/core';
import InputFileComponent from 'ngx-input-file';

@Component(
selector: 'my-app',
templateUrl: './app.component.html'
)

export class AppComponent
@ViewChild(InputFileComponent)
private InputFileComponent: InputFileComponent;

logFiles() console.log(this.InputFileComponent.files);



Demo

StackBlitz

Your HTML should be like this :

<input-file (change)="drop()"
inputId="files"
placeholder="My files"
[(ngModel)]="file">
</input-file>


In Your ts file you define drop() function :

drop()

drop(): void

console.log( this.file);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.