I have userponent.html and userponent.ts All examples I found were in html this way <input type="file" /> I don't want to use this style. I have in my html file:

<button type="button" class="btn" (click)="openPicture()" Browse </button>

Below is the function on ts file:

  public openPicture() {
    //for testing
    console.log('button clicked to open picture');

    var picture = browse.the.picture.and.assing.to.this.variable;

    //another test, see on console if picture is read
    console.log('%c       ', 'font-size: 100px; background: {{picture}} no-repeat;');
    // Later display picture variable on html and save to database or do anything desired.
}

I have found an example on stackoverflow with angular/material but I dont have this module. Is there any other alternative way, without installing any extra package to solve this?

I have user.ponent.html and user.ponent.ts All examples I found were in html this way <input type="file" /> I don't want to use this style. I have in my html file:

<button type="button" class="btn" (click)="openPicture()" Browse </button>

Below is the function on ts file:

  public openPicture() {
    //for testing
    console.log('button clicked to open picture');

    var picture = browse.the.picture.and.assing.to.this.variable;

    //another test, see on console if picture is read
    console.log('%c       ', 'font-size: 100px; background: {{picture}} no-repeat;');
    // Later display picture variable on html and save to database or do anything desired.
}

I have found an example on stackoverflow with angular/material but I dont have this module. Is there any other alternative way, without installing any extra package to solve this?

• javascript
• html
• angularjs
• spring
• typescript

Share Improve this question Follow asked Nov 15, 2017 at 16:27 AnarkieAnarkie 69333 gold badges2222 silver badges4848 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

you can implement like this

<input type="file" style="display: none" #file (change)="fileChange($event)"/>
<button type="button" class="btn" (click)="file.click()"> Browse </button>

.ts

export class AppComponent {
  file: File;

  constructor() {

  }

  fileChange(file) {
    this.file = file.target.files[0];
    console.log(this.file.name);
  }
}

Because of browser security features, you're actually required to use the input tag to access the filesystem. What you can do, though, is hide the input element and access it from the rest of your code and markup.

Take a look at this related answer to get an idea of what you can do. Otherwise, here's a simple example of how it could work:

<input type="file" style="display: none" #file/>
<button type="button" class="btn" (click)="file.click()" Browse </button

You could try good old hidden input in label:

<label class="btn">
    Browse <input type="file" style="display: none;" (change)="handleChange($event)">
</label>

handleChange implementation would have to consume event:

handleChange(event) {
    // consume event.target.files[0] which has File type
}

rest about File can be found on MDN