locked
How to get the name of a file selected by an input file? RRS feed

  • Question

  • User1692641958 posted

    Hello, I need a help, I want to pass the name of the file that was selected through an input file in an html, to a function called Save () where I have called a post method where I can save the name of that file where my component in angular 6

    This is my html code:

    <input type="file" accept="image/*" name="nombre">

    This is my ts code:

    export class TodoListComponent implements OnInit {
    
    builder() { }
    
    Save(){
    // Here I want to get the name of the file
    }
    
    ngOnInit () {
    
    }
    
    
    }

    Monday, December 3, 2018 6:31 AM

All replies

  • User753101303 posted

    Hi,

    See the file API at https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications and scroll down to "Getting information about selected file(s)".

    Monday, December 3, 2018 12:26 PM
  • User61956409 posted

    Hi RockChris,

    I want to pass the name of the file that was selected through an input file in an html, to a function called Save () where I have called a post method where I can save the name of that file where my component in angular 6

    To achieve the requirement, you can try:

    import { Component, ElementRef, ViewChild } from '@angular/core';
    @ViewChild('imgfile') input: ElementRef;
    
    
    Save() {
      // your code logic
    
      if (this.input.nativeElement.files && this.input.nativeElement.files.length) {
        console.log('Uploaded File Name is ' + this.input.nativeElement.files[0].name);
      }
    }

    Test Result:

    With Regards,

    Fei Han

    Tuesday, December 4, 2018 3:00 AM