Wechseltaste Text, wenn input type = Dateibox

Question

gefüllt habe ich folgendes Setup:

• Wenn „SELECT“ geklickt wird ein Datei-Browser öffnet sich und eine Datei ausgewählt ist.
• Der ausgewählte Dateipfad
• Funktionalität der „SELECT“ Datei, um die Änderungen in readonly Textfeld angezeigt wird, die Datei

Ich mag auch den Text, wenn die Taste „SELECT“ vorlegen ändern "UPLOAD" aber nur wenn eine Datei ausgewählt ist (wenn das Textfeld nicht leer ist).

Ich habe versucht, on-change und on-input für das Textfeld zu verwenden, aber kein Erfolg ... Alle Hinweise würden sehr geschätzt werden.

Im Anschluss ist mein Code:

html

<div class="horizontal layout fileUploadContainer"> 
    <paper-button class="upload" id=uploadButton on-click="uploadButton">Select</paper-button> 
    <input type="text" id="fileName" class="fileName" placeholder="File..." on-click="changeButton" on-change="changeButton"></input> 
    <input type="file" class="fileUpload" id="fileUpload" on-change="newFile"> 
</div> 

css

.fileUpload { 
    display: none; 
    } 

    .fileName { 
    width: 200px; 
    padding-left: 10px; 
    border: 1px solid var(--divider-color); 
    } 

js

Answer 1

Es folgt ein Ansatz, allerdings nicht getestet:

$('#file_button').click(function(){ 
    $(this) 
     .text("Upload") 
     .attr('type','submit'); 
    }); 

Answer 2

Sie können das Änderungsereignis auf der Eingabedatei verwenden wie:

newFile: function(e) { 
    // Change fileName value to selected filename 
    this.$.fileName.value = e.target.files[0].name; 
    // Change uploadButton value 
    this.$.uploadButton.value = 'Upload'; 
} 

Alternativ und für den Fall, das obige Beispiel nicht richtig binden, anstatt einen versteckten Eingang verwenden Sie verwenden:

var input = document.createElement('input'); 
input.type = 'file'; 
input.onchange = function(e) { 
    // Change fileName value to selected filename 
    this.$.fileName.value = e.target.files[0].name; 
    // Change uploadButton value 
    this.$.uploadButton.value = 'Upload'; 
}.bind(this); 
input.click();