How to display an image file name in input field after uploading an image in jQuery

user_15643839 0
Viewed 782

Here, I can able to upload a file and display an uploaded file name in the info class. But, I've tried to display an uploaded image file name in the below input field image_main_file_name and I failed. Help me to resolve the same. I can able to display uploaded image file name in info div class as below,

$(input).closest('dd').find('.info').html(fileName);
Help me to display an uploaded image file name in the input field image_main_file_name below,

function setImage(input) {
  let $imgBox = $(input).closest('dd').find('.img_box');
  var reader = new FileReader();
  reader.onload = function(e) {
    $imgBox.html($('<img>').attr('src', e.target.result));
    let fileName = input.files[0].name;
    $(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
    $(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
    $(input).closest('dd').find('.info').html(fileName);
    $("#image_main_file_name").val(fileName);
  };
  reader.readAsDataURL(input.files[0]);
}
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>

html jquery javascript
2 Answers

set id of the control and then use below jquery syntax to set value.

<input type="text" id="image_main_file_name" name="image_main_file_name"/> 

$("#image_main_file_name").val(fileName);
user_142290270

Your code was fine. You just didn't attach a change listener to the file input that calls setImage.

function setImage(input) {
    let $imgBox = $(input).closest('dd').find('.img_box');
    var reader = new FileReader();
    reader.onload = function (e) {
        $imgBox.html( $('<img>').attr('src', e.target.result) );
        let fileName = input.files[0].name;
        $(input).closest('dd').find(".folder_box img").attr('src',e.target.result)
        $(input).closest('dd').find(".folder_box img").attr('data-file',fileName)
        $(input).closest('dd').find('.info').html(fileName);
        $("#image_main_file_name").val(fileName);
    };
    reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
    <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here"> 
</div>

For multiple:

function setImage(input) {
  let $imgBox = $(input).closest('dd').find('.img_box');
  var reader = new FileReader();
  reader.onload = function(e) {
    $imgBox.html($('<img>').attr('src', e.target.result));
    let fileName = input.files[0].name;
    $(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
    $(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
    $(input).closest('dd').find('.info').html(fileName);
    $(input).parent().next().find('#image_main_file_name').first().val(fileName);
  };
  reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>

user_142512210
Related