javascript - Opening file explorer on click of icon - Stack Overflow

admin管理员组

文章数量:1388172

I am using Angular 5 with Typescript. I need to open the file explorer window to add an attachment on clicking an icon. Now, i know how to do this for a button but somehow it does not seem to be working for icon, maybe the click event binding is not working. A little help please?

<input type="file" #file (change)="upload()"/>
<span class="icon-doc" (click)="file.click()">
</span>

And in my ponent :

upload(){
    //The functionality to upload file(s)
}

I am using Angular 5 with Typescript. I need to open the file explorer window to add an attachment on clicking an icon. Now, i know how to do this for a button but somehow it does not seem to be working for icon, maybe the click event binding is not working. A little help please?

<input type="file" #file (change)="upload()"/>
<span class="icon-doc" (click)="file.click()">
</span>

And in my ponent :

upload(){
    //The functionality to upload file(s)
}

• javascript
• angular
• typescript

Share Improve this question Follow edited Jul 15, 2019 at 9:49 wentjun 42.6k1010 gold badges107107 silver badges114114 bronze badges asked Jul 15, 2019 at 9:29 MarkMark 63611 gold badge55 silver badges2020 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I am not sure how exactly your code is written, but you will need to bind that icon to a click method, which will actually programatically click the other input element that handles the attaching of files. This is one way you can do it:

<a (click)="handleClick()" href="javascript:undefined">
  <i class="la la-upload"></i>
</a>

<input class="hidden" type="file" id="upload-file" name="upload-file" accept=".csv" ngf-max-size="2MB" (change)="addAttachment($event)">

You will probably want to hide the input button using CSS:

.hidden {
  visibility: hidden;
  width: 1px;
  height: 1px;
}

And on your ponent.ts,

handleClick() {
  document.getElementById('upload-file').click();
}

addAttachment(fileInput: any) {
  const fileReaded = fileInput.target.files[0];
  //  handle the rest 
}

本文标签： javascriptOpening file explorer on click of iconStack Overflow