I am trying to display an images before upload. its working fine along with the delete button, but when i tried to get the event.target.name its showing me undefined.
$(document).on('change', '#product_image', function(e) {
var images = $('#product_image')[0].files;
var images_length = images.length;
for (var i = 0; i < images_length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var new_files = $('<div class="product-multi-img"><img src="' + e.target.result + '" alt="" class="img-fluid" id="product-images"><button class="btn delete-product-images" id="delete-product-images" type="button"><input type="text" value="' + e.target.files[i].name + '"><i class="fa-solid fa-trash"></i></button></div>');
$('#preview-images-wrapper').append(new_files);
}
reader.readAsDataURL(this.files[i]);
}
});
$(document).on('click', '#delete-product-images', function(event) {
$(this).parent('.product-multi-img').remove();
});<div class="product-image-wrapper">
<div class="image-form">
<i class="fa-solid fa-cloud-arrow-up"></i>
<h1 class="title">{{__('product::product.click the button below to add images')}}</h1>
<input type="file" class="form-control" id="product_image" name="product_image[]" multiple>
<button class="browse_btn" type="button">
{{__('product::product.browse images')}}
</button>
</div>
<div class="preview-images-wrapper" id="preview-images-wrapper">
</div>
</div>The e.target.files[i].name is showing undefined. but if used outside reader.onload = function(){} it shows the file name if you select single file, but when you select multiple files it shows single file name for all.