On click, remove image from multiple input field and upload remaining into database

Question

I am developing a site which allow uploading multiple images for one id. But I want to upload images into text format into database and real image to my directory. But before uploading image into database I preview images using JavaScript's FileReader.

My problem is, when I click remove in preview image , that image should also be removed from images that I want to upload. And second, that I don't know how to do this, when I click first time and select some images, then again I select some images by clicking input field, the images selected second time is being uploaded into database instead of all.

Here are my codes

 // image preview
    $("#productImage").on("change", function(e) {
        var files = e.target.files,
            filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();

            fileReader.onload = (function(e) {
                var file = e.target;
                $('.image-preview').append("<div class=\"product-image\">" +
                    "<img class=\"image-thumb\" src=\"" + e.target.result +
                    "\" title=\"" + file.name + "\" + data-file = \"" + file.name +
                    "\"/>" +
                    "<br/><div class=\"remove-image\">&#10060;&nbsp;Remove</span>" +
                    "</div>");
                $('.remove-image').click(function(e) {
                    $(this).parent('.product-image').remove();
                });
            });
            fileReader.readAsDataURL(f);
        }
    });

.form-elements {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 10px 0;
}
.form-elements .input-label {
    padding: 10px 0;
}

.input-label label {
    font-family: sans-serif;
    font-size: 20px;
    color: #fff;
}
.image-preview {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 5px;
}

.image-preview .product-image {
    display: block;
    margin: 5px 10px;
    width: 150px;
    text-align: center;
}

.image-preview .product-image .image-thumb {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}

.image-preview .product-image .remove-image {
    padding: 5px;
    margin: 5px 0;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background: #ff3636;
    color: #fff;
    cursor: pointer;
}

.image-preview .product-image .remove-image:hover {
    background: red;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<!--         product images       -->
                <div class="form-elements outside">
                    <div class="input-label">
                        <label for="productName">Select product image(s)</label>
                    </div>
                    <div class="image-preview">
                        <!--     Images will be here            -->
                    </div>
                    <input type="file" id="productImage" name="productImage[]" multiple />
                </div>

PHP code snippet

<?php
//connection
$connect = mysqli_connect('localhost','root','','sahi_chuno_db');

    $image = $_FILES['productImage']['name'];
    $temp_image = $_FILES['productImage']['tmp_name'];
    $product_id = 1;

    for ($i=0; $i < count($image); $i++) { 
        $query = $connect->prepare("INSERT INTO `product_images` (`product_id`, `product_image`) 
                                    VALUES(?, ?)");
        $query -> bind_param('is',$product_id, $image[$i]);
        $run = $query -> execute();
        if($run){
            //move images to directory
            move_uploaded_file($temp_image[$i], "../uploads/$image[$i]");
        }  else{
            echo "Not uploaded";
        }
    }

?>

Try to generate `product_id` autoincremented by the database. — Kunal Raut, Apr 11 '20 at 08:20
There is another id which is auto_incremented. product_id is product for which I want to upload images. One product can have multiple images. — Aftab Ansari, Apr 11 '20 at 08:44

Kunal Raut · Answer 1 · 2020-04-11T08:17:26.510

0

You can use

<button onclick = "myFunction()">Remove</button> /Remove button in preview

function myFunction() {
document.getElementById("productImage").value = "";

}

To clear the input field and if it is cleared it will not be uploaded.

Note : For more details Click Here

edited Apr 11 '20 at 08:17

answered Apr 11 '20 at 07:38

Kunal Raut

2,495
2
9
25

I did not get that ? – Aftab Ansari Apr 11 '20 at 07:46
its just that when you want to remove a file from getting upload get the id of the button in the preview and set onclick event to that button which triggers the function to remove the value from the input field which is given above. – Kunal Raut Apr 11 '20 at 07:53
I want to clear that, what is "uploadCaptureInputFile" here. – Aftab Ansari Apr 11 '20 at 08:12
its just for the example in that area you must write the id for your `input` which you are using for uploading files. – Kunal Raut Apr 11 '20 at 08:14
And now that you have provided it that will be `productImage` – Kunal Raut Apr 11 '20 at 08:14
It means that the value of `productImage` will be erased and it will ultimately not get uploaded. – Kunal Raut Apr 11 '20 at 08:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211418/discussion-between-aftab-ansari-and-kunal-raut). – Aftab Ansari Apr 11 '20 at 09:00
But, this will erase all images in input field. I just want to remove only one image on click remove. – Aftab Ansari Apr 11 '20 at 09:02

On click, remove image from multiple input field and upload remaining into database

1 Answers1