OnChange Entrée de type de script

Question

Je souhaite être en mesure de déclencher une modification lorsqu'un fichier est sélectionné à partir d'une entrée (fichier). Je souhaite que l'événement déclenché définisse une zone de texte comme nom du fichier. J'utilise HTML5, Typescript et Angulaire2. Je ne peux pas comprendre ou trouver un exemple de la façon exacte de produire le comportement que je suis après.

voir mon code ci-dessous:

component.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

@Component({ 
    selector: 'testConnection', 
    // ignore error on require 
    template: require('./testConnection.component.html') 
}) 
export class TestConnectionComponent { 
    public http: Http; 
    public requestData: RequestData; 


    public constructor(http: Http) { 
     this.http = http; 

     (<HTMLInputElement>document.getElementById('fileInput')).onchange = (ev: Event) => { 
      var fileInput = (<HTMLInputElement>ev.srcElement).files[0]; 

      var fileTextbox = (<HTMLInputElement>document.getElementById('fileTextbox')); 
      fileTextbox.value = fileInput.name; 
     } 
    } 


    public testButtonClick() { 

     // Iniatialise Request object 
     let request: RequestData; 
     request = { "CountryCode": "", "SiteIDList": "" }; 

     // Get site(s) 
     var siteIdList = (<HTMLInputElement>document.getElementById('siteIDInput')).value; 

     // Get selected country 
     var countryCode = (<HTMLInputElement>document.getElementById('countryDropdown')).value; 

     // Veryify contents is just site ids. 
     // TODO 
     request.CountryCode = countryCode; 
     request.SiteIDList = siteIdList; 


     // Set Http POST options 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     // Call Api with test connection data 
     this.http 
      .post('/api/TestConnection/TestConnection', JSON.stringify(request), options) 
      .subscribe(data => { 
       // alert request ok 
       alert('ok'); 
      }, error => { 
       // Log error 
       console.log(error.json()); 
      }); 
    } 
} 

interface RequestData { 
    SiteIDList: string; 
    CountryCode: string; 
} 

component.html

<h2>Test Site Connection</h2> 

<p>This will allow you to check the connectivity of a set of sites by either individually or uploading a CSV file of Site IDs.</p> 
<br /> 
<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Manual Test</h3> 
    </div> 
    <div class="panel-body"> 
     <p> 
      Select the country and the sites you want to test. 
     </p> 
     <ul> 
      <li>Multiple sites can be selected using commas (,).</li> 
      <li>you can see results in the Site Connection Results tab</li> 
     </ul> 
     <br /> 
     <!--Replace with lookup to enabled countries--> 
     <div class="form-group col-lg-4"> 
      <div class="col-lg-6"> 
       <select class="form-control" id="countryDropdown"> 
        <option>Select Country</option> 
        <option>US</option> 
        <option>SG</option> 
        <option>NL</option> 
       </select> 
      </div> 
     </div> 
     <div> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" placeholder="SiteID(s)" id="siteIDInput" /> 
      </div> 
      <button class="btn btn-primary" (click)="testButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="panel panel-success"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Upload file</h3> 
    </div> 
    <div class="panel-body"> 
     <div> 
      <p>Upload a CSV file of sites to test all at once.</p> 
      <br /> 
      <div class="col-lg-4"> 
       <input type="text" class="col-lg-4 form-control" id="fileTextbox" disabled/> 
      </div> 
      <label class="btn btn-primary"> 
       Browse <input type="file" id="fileInput" style="display:none;" onchange="{ setFileName() }"/> 
      </label> 
      <button class="btn btn-primary" (click)="searchButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="modal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>One fine body…</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

Laissez-moi savoir si vous avez besoin de plus amples informations, merci à l'avance.

Answer 1

Essayez d'utiliser (changement) événement de liaison

<input type="file" id="fileInput" style="display:none;" (change)="setFileName()"/> 

Answer 2

Si vous devez récupérer le nom du fichier avant le télécharger, vous pouvez le faire de cette façon:

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <input type="file" (change)="onChange($event)"/> 
     </div> 
     <p>Filename : {{filename}}</p> 
    `, 
    providers: [] 
}) 
export class AppComponent { 
    filename: string; 
    constructor() { } 

    onChange(event) { 
    this.filename = event.srcElement.files[0].name; 
    } 
} 

Voici une working plunker