How to open file dialog box when click an image in Angular 6

Question

I am new to Angular 6. I know this may be silly but I did not get any solution. I want to open file dialog box when click the browse image which is in the text field. This is what I have tried.

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <img src="../../../../../assets/images/maps/Browse.png" type= "file" width="40" height="40" style=" position: absolute; top: 1px; right: 1px" aria-hidden="true"/>
  </div>
</div>

How can I make this to open a file dialog box easily?

do you mean something like this? stackoverflow.com/questions/47936183/angular-file-upload — לבני מלכה
– לבני מלכה, Commented Nov 4, 2018 at 8:15

Riverman · Accepted Answer · 2020-05-30 18:46:04Z

15

This is a relatively old question, but I have a simple yet smooth solution for this question for people coming here just now.

Add an ID to your <input> HTML element (It's FileSelectInputDialog in my example).

<input #FileSelectInputDialog type="file" multiple/>

Create a handle to it in your component using ViewChild:

import { ViewChild } from '@angular/core';

@ViewChild('FileSelectInputDialog') FileSelectInputDialog: ElementRef;

public OpenAddFilesDialog() {
    const e: HTMLElement = this.FileSelectInputDialog.nativeElement;
    e.click();
}

Then you can add the (click)="OpenAddFilesDialog()" directive to your image or to any other HTML element, for example, to a regular button:

<button mat-icon-button class="BtnAddFiles" (click)="OpenAddFilesDialog()">
    <mat-icon>add_box</mat-icon>
</button>

edited May 30, 2020 at 18:46

answered Mar 28, 2020 at 13:44

Riverman

5237 silver badges18 bronze badges

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

Comments

Prathap Parameswar · Accepted Answer · 2018-11-04 08:20:32Z

1

create input with file type and add css to show it as an image

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <input type="file" class="filepicker">
  </div>
</div>

css follows

.filepicker{
    -webkit-appearance: none;
    position:absolute;
    top:1px;
    right:1px;
    width: 40px;
    height: 40px;
    text-indent: 100em;
    background: url('assets/images/maps/Browse.png');
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

also add an event emitter to capture change event like (change)="onChange($event)".

answered Nov 4, 2018 at 8:20

Prathap Parameswar

4991 gold badge3 silver badges11 bronze badges

4 Comments

RMD Over a year ago

Can you please describe this event emitter part as I am new to programming?

Prathap Parameswar Over a year ago

you can add event emitter in this tag to get the actual file user selected and send to modal if required <input type="file" class="filepicker" (change)="onChange($event)"> detailed in stackoverflow.com/questions/38476315/…

RMD Over a year ago

Though it opens the file explorer dialog box it does not show the attached item.

Prathap Parameswar Over a year ago

In the fileChange event you can capture the filename and assign to variable and show it in another div using angular template expression angular.io/guide/template-syntax

Collectives™ on Stack Overflow

How to open file dialog box when click an image in Angular 6

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related