Verwenden Sie Javascript, um den Dateinamen der in Rails form_for file_field ausgewählten Datei vor dem Senden zu wählen

Question

Ich schreibe Code, um ein js Popup zu starten, das einen Benutzer bestätigen muss, bevor sie eine bestimmte destruktive Aktion durch Überschreiben von Daten mit einem Rails form_for vornehmen. Ich habe bereits das Popup js und einige andere Logik funktioniert, meine letzte verbleibende Aufgabe ist, dass ich nur dieses js Popup aktivieren möchte , wenn eine Datei in einem bestimmten file_field auf dem Formular angefügt wurde. Wenn es keine Datei an diesem file_field angeschlossen ist, brauche ich das Popup nicht.

Wie kann ich den Status abgreifen, ob momentan eine Datei angehängt ist/der Dateiname? Hier ist mein aktueller relevanter Code. Die Syntax ist Slim:

Formularansicht: Relevante file_field Abschnitt

tr 
    = f.fields_for :location_csv, LocationCSV.new do |p| 
    td = p.label :attachment, "#{@campaign.form_attributes[:location_csv][:label]}" 
    td.csv-example 
     - if @campaign.has_entrants_with_locations? 
     p.alert Warning: Updating Will Delete Location Information For Past Completed Entries 
     = p.file_field :attachment, accept: "text/csv", class: 'form-control' 

Formularansicht: Senden-Schaltfläche Abschnitt mit einer anderen Logik

tr 
    td colspan='2'= f.submit class: "button success", id: "btn-form-submit", onclick: "destructionWarning(#{@campaign.has_entrants_with_locations?})" 

Javascript Snippet

function destructionWarning(status) { 
    if (status === true) { 
    if (confirm("WARNING: This update will delete the store location data for #{@campaign.entrants_with_locations_count} campaign entrant#{'s' if @campaign.entrants_with_locations_count > 1}! Cancel to abort.") == true) {} 
    else { 
     event.preventDefault(); 
    } 
    } 
} 

EDIT: Hier ist meine aktualisierte JavaScript-Snippet:

var csvElement = document.getElementById("quiz_campaign_location_csv_attributes_attachment"); 
var csvAttachment = csvElement.value; 

function destructionWarning(status) { 
    if (status === true && csvAttachment != "") { 
    if (confirm("WARNING: This update will delete the store location data for #{@campaign.entrants_with_locations_count} campaign entrant#{'s' if @campaign.entrants_with_locations_count > 1}! Cancel to abort.") == true) {} 
    else { 
    event.preventDefault(); 
    } 
    } 
} 

Answer 1

Was ist die HTML-ID des Eingabeelement Dateifeld? Sie sollten den Wert der Eingabe für eine leere Zeichenfolge testen können.

Angenommen, die ID der ID des Dateieingabeelements lautet attachment.

Mit Ebene Javascript:

var file_input = document.getElementById("attachment"); 
var filename = file_input.value; 
if(filename != "") { 
    // There is a file specified 
} else { 
    // There is no file specified 
} 

jQuery verwenden:

if($('#attachment').val() != "") { 
    // There is a file specified 
} else { 
    // There is no file specified 
} 

Wenn Sie auf das Vorhandensein des Dateinamens testen möchten in Ihrer destructionWarning Funktion:

function destructionWarning(server_status) { 
    if (server_status == true) { 
    var file_input = document.getElementById("attachment"); 
    var filename = file_input.value; 
    if(filename != "") { // user has attached a file 
     var user_confirmed = confirm("WARNING: This update will delete the store location data for #{@campaign.entrants_with_locations_count} campaign entrant#{'s' if @campaign.entrants_with_locations_count > 1}! Cancel to abort."); 
     if (user_confirmed != true) { 
     // cancel the form submission 
     event.preventDefault(); 
     } 
    } 
    } 
}