Use label to select image file but have attribute displayed input

Question

I am looking to have the label be used for the selection of the item (so Choose File) is gone.

Here is my HTMl:

<div class="form-group">
   <label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
   <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>

It works, although I do not have the image to actually have the name shown (which is part of the input tag)

Here is the js to try to make it show (which is 100% editable):

document.getElementsByClassName("trigger").onClick = function () {
  document.getElementsByClassName("uploadFile").style.display = 'block';
  document.getElementsByClassName("uploadFile").value = this.value;
};

Tried:

document.getElementsByClassName("trigger").onClick = function () {
  document.getElementsByClassName("uploadFile")[0].style.display = 'block';
  document.getElementsByClassName("uploadFile")[0].value = this.value;
};

With no luck.

JSFiddle: http://jsfiddle.net/07zw6h3q/

I am lost on to make just the file name show, without some crazy javascript add in. Something simple. Using Rails 4.2 and Bootstrap.

Where is `uploadFile`? and `document.getElementsByClassName()` returns you a collection so you need to iterate using index i.e. `document.getElementsByClassName("uploadFile")[0].style` — Satpal, Sep 01 '15 at 07:53

score 1 · Accepted Answer · edited May 23 '17 at 12:14

You need to use the change event.

$('.uploadBtn').change(function(){
  var a = $(this).val().split('\\');
  $('.trigger').html(a[a.length - 1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
  <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>

Also you can show a preview of the file (if it's image of course) Preview an image before it is uploaded

score 0 · Answer 2 · answered Sep 01 '15 at 08:17

JSFiddle

HTML

<div class="form-group">
    <label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label>
    <input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" />
    <label id="broker_image_name">no selected file</label>
</div>

JavaScript

var upload_button = document.getElementById("broker_image");

upload_button.addEventListener("change", function() {
    var file_name = upload_button.value;

    /* 
        the file come like this : C:\fakepath\file.htm
        so we only need the file name
    */
    file_name = file_name.split("\\"); // preventing \ to be escaped himself
    var file_name_length = file_name.length;

    file_name = file_name[file_name_length - 1];

    var broker_image_name = document.getElementById("broker_image_name");

    broker_image_name.innerHTML = file_name;
});

I used the event change to change the file name, which is an additional label I put right after your button (that I stylized a bit by the way) and that is updated with the file name.

You see a commented part for the file name value because when getting back the file name after the user select one, it comes with the pattern C:\fakepath\myFile.htm so I extracted only the file by splitting the string.

Use label to select image file but have attribute displayed input

2 Answers2