Personalizing File Selection

Question

Personalizing File Selection

What is the process for customizing file uploads?

<%= f.file_field :image, class: 'inputfile' %>
<label for="image">Choose an image</label>

I am looking to replace "choose an image" with "choose a file"

javascript ruby-on-rails ruby

Answer 1

Answer №1

Your JavaScript code is missing the logic to retrieve the selected file name as shown in the tutorial:

var fileName = e.target.value.split( '\\' ).pop();

Update your JavaScript code to include this logic:

input.addEventListener( 'change', function( e ) {
  var inspiration_image = e.target.value.split( '\\' ).pop();
  if( inspiration_image ) {
    label.querySelector( 'span' ).innerHTML = inspiration_image;
  } else {
    label.innerHTML = labelVal;
  }
});

Full updated code snippet:

<%= file_field_tag :image, class: 'inputfile' %>
<label for="inspiration_image">Choose a file</label>

<script>
  var inputs = document.querySelectorAll( '.inputfile' );
  Array.prototype.forEach.call( inputs, function( input ) {
    var label  = input.nextElementSibling,
      labelVal = label.innerHTML;

    input.addEventListener( 'change', function( e ) {
        var fileName = '';
        if( this.files && this.files.length > 1 ) {
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
        } else {
            fileName = e.target.value.split( '\\' ).pop();
        }

        if( fileName ) {
            label.querySelector( 'span' ).innerHTML = fileName;
        } else {
            label.innerHTML = labelVal;
        }
    });
  });
</script>

Answer 2

Your JavaScript code is missing the logic to retrieve the selected file name as shown in the tutorial:

var fileName = e.target.value.split( '\\' ).pop();

Update your JavaScript code to include this logic:

input.addEventListener( 'change', function( e ) {
  var inspiration_image = e.target.value.split( '\\' ).pop();
  if( inspiration_image ) {
    label.querySelector( 'span' ).innerHTML = inspiration_image;
  } else {
    label.innerHTML = labelVal;
  }
});

Full updated code snippet:

<%= file_field_tag :image, class: 'inputfile' %>
<label for="inspiration_image">Choose a file</label>

<script>
  var inputs = document.querySelectorAll( '.inputfile' );
  Array.prototype.forEach.call( inputs, function( input ) {
    var label  = input.nextElementSibling,
      labelVal = label.innerHTML;

    input.addEventListener( 'change', function( e ) {
        var fileName = '';
        if( this.files && this.files.length > 1 ) {
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
        } else {
            fileName = e.target.value.split( '\\' ).pop();
        }

        if( fileName ) {
            label.querySelector( 'span' ).innerHTML = fileName;
        } else {
            label.innerHTML = labelVal;
        }
    });
  });
</script>

Personalizing File Selection

Answer №1

Similar questions

Guide to sending data from an HTML page to a MVC Controller using WebApi

Tips on utilizing the event.preventDefault() method within AngularJS?

Techniques for eliminating single quotes from string arrays and then creating a new array by separating them with commas

Use the $.get() method in JavaScript to send a parameter to my controller function

jQuery dynamically updating calculations on a single row consecutively

JavaScript Slider for Color Selection

Discovering common elements in various arrays of objects

Combining hash arrays in Ruby

What is the best way to transform a JSON object with various key-value pairs into a list using JavaScript?

Maximizing the power of datatables with ajax integration

When a key is pressed, apply a background color and fade out effect using JavaScript

undefined event typescript this reactjs

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

The resizing effect in jQuery causes a blinking animation

What could be causing the constant undefined response when using ajax to post to php?

The method for transferring text box values to the next page using a hyperlink in JSP is as follows:

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to

Issue with bidirectional binding on angular material slide toggle not functioning as anticipated (Angular 4)

Troubleshooting Angular MIME problems with Microsoft Edge

Tips for converting HTML content into a properly formatted text file