CODEWITHSUNDEEP
javascriptjqueryhtmlfile
John Voltaire Maximo
John Voltaire Maximo

Reputation: 93

file input filename put into textfield

I have an upload function wherein I need to customize the fileinput element in html.. I will need to hide it and replace it with my own button and text inputfield..

my question is, how can I put the filename chosen into my custom text inputfield as a substitute to the inputfield that I've hidden?

here's an initial code:

<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none"/>
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit" >Upload</button>

Upvotes: 0

Views: 174

Answers (2)

guest271314
guest271314

Reputation: 1

Try utilizing .change() , name property of File object

$("#sandigan").change(function(e) {
  $("#sandiganFilename").val(this.files[0].name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none"/>
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit" >Upload</button>

Upvotes: 1

Rick Su
Rick Su

Reputation: 16440

as mentioned in comments, you cannot get full path, but doable for filename only.

jQuery(function($) {
  $("#sandigan").on('change', function() {
    var file = $(this).val();
    $("#sandiganFilename").val(file.split('\\').reverse()[0]);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none" />
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit">Upload</button>

Upvotes: 0

Related Questions