let data = {};

let acceptData = () => {
    let imageFile = productImage.files[0];
    data["Price"] = parseFloat(price.value);
    data["Model"] = model.value;

    // Read the image file as a data URL
    let reader = new FileReader();
    reader.onload = function(event) {
        data["Image"] = event.target.result;
        createProduct();
    };
    reader.readAsDataURL(imageFile);
};
let createProduct = () => {
    product.innerHTML += `
    <div class="product">
        <div class="product-part1">
            <img id="image"src="${data.Image}" alt="Product Image">
        </div>
        <div class="product-part2">
            <h4>${data.Model}</h4>
            <h4 class="price">${data.Price}</h4>
            <div class="checkout">
                <button><a href=""><h3>Buy Now</h3></a></button>
                <button><a href=""><h3>Add to Cart</h3></a></button>
                <button type="button" onclick="editProduct(this)"><h3>Edit</h3></button>
                <button type="button" onclick="deleteProduct(this)"><a href=""><h3>Delete</h3></a></button>
            </div>
        </div>
    </div>`;
    resetForm();  
};

let deleteProduct= (e)=>{
    e.parentElement.parentElement.parentElement.remove();
}

let previousImageSrc; // Variable to store the previous image source

let editProduct = (e) => {
    // Get the selected product element
    let selectedProduct = e.parentElement.parentElement.parentElement;
    
    // Get the image source, price, and model values from the selected product
    previousImageSrc = selectedProduct.querySelector("#image").src; // Store the previous image source
   // Extract the filename from the image source
    let priceText = selectedProduct.querySelector(".price").textContent;
    let modelText = selectedProduct.querySelector("h4").textContent;
    
    // Set the image source, price, and model values in the form fields
    productImage.src = previousImageSrc; // Set the image source
    price.value = priceText; // Set the price value
    model.value = modelText; // Set the model value

    // Log the previous image filename

    
    // Remove the selected product from the DOM
    selectedProduct.remove();
};
<!-----html code
    <a href=""><div class="product">
                    
                        <div class="product-part1">
                            <img  id=""src="https://images.unsplash.com/photo-1571153041245-5c72320bc914?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1vZGVybiUyMHdlYXJ8ZW58MHx8MHx8fDA%3D" alt="">
        
                        </div>
                        <div class="product-part2">
                            <h4>T-shirt</h4>
                            <h4 class="price">price:300</h4>
                            <div class="checkout">
                                <button><a href=""><h3>Buy Now</h3></a></button>
                                <button><a href=""><h3>Add to Cart</h3></a></button>
                                <button onclick="editProduct(this)"><h3>Edit</h3></button>
                                <button onclick="deleteProduct(this)"><h3>Delete</h3></button>
                            </div>
                           
                            
        
                        </div>
                    
                    
    
                </div></a>
--->

now problem is that iam getting price and model previous value when i click on edit button , but iam not getting image filename its give me no file chosen default why so ,i want prvious iamge file so that ino need to edit when i only require to update price and model and give me code do i took accept image well i need to where is the error i written all code coreectly but still not getting previous image file name ,guys fix it please