CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Charles847
Charles847

Reputation: 155

Use javascript to grab the filename of file selected in Rails form_for file_field before submitting

I am writing code to launch a js popup that will require a user to confirm before they make a specific destructive action by overwriting data with a rails form_for. I already have the js popup and some other logic working, my last remaining task is that I only want this js popup to activate if a file has been attached in a specific file_field on the form. If there is no file attached on that file_field I don't need this to popup.

How can I grab the status of whether or not there is currently a file attached / the filename? Here is my current relevant code. The syntax is Slim:

Form View: Relevant file_field section

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'

Form View: Submit Button Section including some other logic

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: Here is my updated 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();
    }
  }
}

Upvotes: 0

Views: 1355

Answers (1)

Bill Doughty
Bill Doughty

Reputation: 2310

What is the HTML id of the file field input element? You should be able to test the value of the input for an empty string.

Let's assume the id of the file input element id is attachment.

Using plain 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
}

Using jQuery:

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

If you want to test for the presence of the filename in your destructionWarning function:

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();
      }
    }
  }
}

Upvotes: 1

Related Questions