How to display selected file in label instead of input tag in angular 6

Question

I should display the selected file name in label tag instead of displaying in the input tag. Can you please help me to achieve this. Thanks in advance

My code looks like below,

<div *ngFor='let item of list; let i = index'>
  <input #fileInput type="file"  />
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>

I have tried changing input tag to label but it's not working. Could you please help me to achieve it. Thanks in advance.

Pushprajsinh Chudasama · Accepted Answer · 2019-08-28 07:48:02Z

3

Try this code.I hope it will helps you.

HTML:

 <div>
        <div>
            <input #fileInput type="file" (change)="fileProgress($event)" />
            <button type="button" (click)="fileInput.click()">trigger</button>
            <button type="button" (click)="reset(fileInput, i)">Reset</button>
        </div>
        <span *ngIf="fileName">{{fileName}}</span>
    </div>

TS:

fileProgress(fileInput: any) {
    let file = fileInput.target.files[0];
     this.fileName = file.name;
    console.log(this.fileName)
}

answered Aug 28, 2019 at 7:48

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olive Over a year ago

Thanks for the response. It's working for me but its show same file name to all the label once I selected file for the specific row.

Pushprajsinh Chudasama Over a year ago

You can use for loop for that.

Ganesh · Accepted Answer · 2019-08-28 09:40:22Z

2

try this once..

This will display the name of the file you have selected.

In Template

<div *ngFor='let item of list; let i = index'>
  <span *ngIf="selectedLogoFile[i]">{{selectedLogoFile[i].name}}</span>
  <input style="display: none" type="file" (change)="onFileChanged($event,i)" #fileInput>
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>

In Component

  selectedLogoFile: File[]= [];

  onFileChanged(event: any,index: any) {
    this.selectedLogoFile.push(event.target.files[i]);
    console.log(this.selectedLogoFile[i].name);
  }

hope this will give you an idea to solve your issue.. :)

edited Aug 28, 2019 at 9:40

answered Aug 28, 2019 at 7:45

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

2 Comments

Olive Over a year ago

Thanks for the response. It's working for me but its show same file name to all the label once I selected file for the specific row.

Ganesh Over a year ago

@Olive use index value to solve this issue, i have updated the answer chek it once

kaminarifox · Accepted Answer · 2019-08-28 07:50:25Z

1

You can hide input and wrap it with label
Bind variable to input with [(ngModel)]

<label> {{fileName}}
  <input #fileInput type="file" [(ngModel)]="selectedFile" [style.display]="'none'">
</label>

and make getter

get fileName(): string {
  return this.selectedFile ? this.selectedFile.split('/').pop() : 'Select file';
}

then use this getter in any tag like {{ fileName }}

answered Aug 28, 2019 at 7:50

kaminarifox

4331 gold badge5 silver badges14 bronze badges

1 Comment

Olive Over a year ago

Thanks for the response. I'm using the reactive form so ngModel cannot be used to register form controls with a parent formGroup directive

Collectives™ on Stack Overflow

How to display selected file in label instead of input tag in angular 6

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related