Text field to launch file upload dialog: how to get the filename?

Question

I have created a text field that once clicked, opens a file upload dialog. I did this by creating a second input tag with visibility: hidden.

I want the file chosen in the dialog to then show up in the text field, but haven't been able to get it to work. I haven't even been able to get the file name yet via jQuery. What am I missing?

Here is my code:

 $('#import-file-text-field').click(function(){ $("#import-file-text-field-hidden").trigger("click"); // $("#import-file-text-field-hidden").show(); let filename = $('#import-file-text-field-hidden').val(); var f = $('input[type=file]').val(); console.log("File chosen for upload:", filename, f) }); 

 body { background-color: #aaa; font-family: 'Raleway', sans-serif; color: #aaa; } .import_list_table { width: 380px; background-color: #fff; margin: 20px; border-radius: 10px; } .import_list_table td { padding-left: 10px; } .gray-button { text-align: center; background-color: #ccc; padding: 6px 12px 10px 12px; height: 33px; width: 162px; color: white; border-radius: 6px; font-size: 13px; margin: 0px 10px 15px 0px; border: none; cursor: pointer; } .green-button { text-align: center; background-color: #b3d450; padding: 6px 12px 10px 12px; height: 33px; width: 162px; color: white; border-radius: 6px; font-size: 13px; margin: 0px 10px 15px 10px; border: none; cursor: pointer; } .gray-button:hover, .green-button:hover{ opacity: .60; color: #000; } .gray-button:active, .green-button:active{ opacity: 1.0; border: none; text-decoration: none; } .import-blue-box { height: 70px; width: 70px; background-color: #59a2c8; border-radius: 8px; position: relative; } .import-blue-box .fa-file-image { padding-top: 12px; padding-left: 16px; text-align: center; color: white; } #import-file-text-field{ border-radius: 10px; height: 32px; border: 1px solid #ccc; width: 260px; line-height: 24px; padding-left: 6px; } 

 <table class="import_list_table" border=0> <tr> <td colspan="2"><center><h4>Upload a file to import your contact list.</h4></center></td> </tr> <tr> <td> <div class="import-blue-box"> <i class="far fa-file-image fa-3x"></i> </div> </td> <td><br> <input type="text" id="import-file-text-field" placeholder="No file chosen"> <input id="import-file-text-field-hidden" type="file" style="visibility: hidden;"/> <br> </td> </tr> <tr> <td colspan="2"> <div> <br> <button type="button" class="gray-button pull-left" id="import_cancel_button" data-dismiss="modal">Cancel</button> <button type="button" class="green-button pull-right" id="import_list_button" data-dismiss="modal">Import List</button> </div> </td> </tr> </table> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

Go for the change event and get the file input value or files prop.
Here's a simplified version:

 var $name = $("#name"), $file = $("#file"); $name.on("click", function(){ $file.trigger("click"); }); $file.on("change", function(e) { var data = $file.prop('files')[0]; if(!data) return; data.fakepath = $file.val(); $name.val( data.name ); console.log( data ); }); 

 <input type="text" id="name" placeholder="No file chosen"> <input id="file" type="file" hidden> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

---

In plain JS it would look like:

 const EL = s => document.querySelector(s), EL_name = EL('#name'), EL_file = EL('#file'); EL_name.addEventListener("click", () => EL_file.click() ); EL_file.addEventListener("change", () => { let data = EL_file.files[0]; if(!data) return; data.fakepath = EL_file.value; EL_name.value = data.name; console.log( data ); }); 

 <input type="text" id="name" placeholder="No file chosen"> <input id="file" type="file" hidden> 

Answer 2

Your click eventhandler for input type=text can be shortened to:

$('#import-file-text-field').click(function(){
  $("#import-file-text-field-hidden").trigger("click");
});

Now add an eventlistener to the hidden input=file like this:

$("#import-file-text-field-hidden").on('change', function()
{
  let filename = $('#import-file-text-field-hidden').val();
  var f  = $('input[type=file]').val();
  console.log("File chosen for upload:", filename, f)
}