Имя файла не появляется при загрузке

Question

У меня есть форма, и у меня есть часть, куда я загружаю изображения, но когда я загружаю изображение, ее имя не появляется на ярлыке, я нашел код, который заставил его работать по частям, потому что он не показывает только имя изображения и да "C: \ fakepath \ name name", короче говоря, я просто хочу имя изображения, спасибо!

Форма:

<%= bootstrap_form_for(@var) do |f| %>
  <%= f.file_field :images, multiple: true, label: "Add an iamge" %>

JS, которые показывают «C: \ fakepath \ name name»:

$(document).on('ready turbolinks:load', function() {
  $('.custom-file-input').change(function(){
    $('.custom-file-label').text(this.value);
  });
});

Answer 1

// When working with turbolinks stop moshing your code inside of turbolinks:load and ready handlers. 
// Write delegated event handlers instead which are idempotent by design.
$(document).on('change', '.custom-file-input', function(e) { 
  // split file path by back or forward slashes
  let path = this.value.split(/^.*[\\\/]/);
  this.labels[0].innerText = path.slice(-1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label for="custom_file_input">Filename goes here</label>
  <input name="custom_file_input" id="custom_file_input" class="custom-file-input" type="file"/>
</form>