I have a edit form where I have to display the previously uploaded image by the user. I searched on internet and tried with the solutions but it is not working. How can I show the uploaded image and it's name?

<div class="col-md-4">
    <div class="form-group ">
        <label class="required title_header">Image</label>
        <input type="file" class="form-control" id="ImageFile" required name="ImageFile" accept="image/*">
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div id="i_imagePrvw" class="thumbnail" style="display:none">
            <img class="img-responsive" id="i_targetImg" style="display:block; object-fit:fill;height:140px;width:120px;" />
            <div class="caption">
                <a href="#" onclick="clearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
                <p id="description"></p>
            </div>
        </div>
    </div>
</div>

I am retrieving the data in json format. In console log I am getting the values as::

"ImageTitle":"98570125698.jpg",
"ImagePath":"E:\\projects\\fis\\UI\\Files\\98570125698.jpg"

I am trying to set the image name and file via this code, but it is not working.

var image_ = data.firm_model[0].ImagePath;
$('#i_targetImg').html('<img src="' + image_ + '"/>');
$('#ImageFile').val(data.firm_model[0].ImageTitle);

Showing errors as

Not allowed to load local resource: file:///E:/projects/fis/UI/Files/98570125698.jpg
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Please do not mark as possible duplicate, first read the whole problem. I am trying to set the image and image name but I do not know, how to do. If you have the solution, please do a reply. Thank You!