How to set null image file after ajax success in PHP?

I am working on ajax and PHP. When I click on the post button the message value removes by $(“#message”).val(“”); after ajax success (data inserted into the database by PHP and ajax ) but the file(browse ), the image doesn’t remove after success. The file should be empty after AJAX success and the ajax code is not run if I leave the image. I want to leave an image and the message should be inserted without an image and with the image is working.

            $(document).on("click", "#save", function (e) {
           e.preventDefault();
                var form_data = new FormData();
form_data.append('message', message)

      var property = document.getElementById('photo').files;

property = property[0]; if(property){//you have to check if the files exists or it will fail trying to access properties from an undefined object

    var image_name = property.name;
    var image_extension = image_name.split('.').pop().toLowerCase();
    form_data.append("file",property);
}
                //Ajax call to send data to the insert.php
                $.ajax({
                    type: "POST",
                    url: "insert_posts.php",
                    data: form_data,
                   contentType:false,
          cache:false,
          processData:false,
                    success: function (data) {
                        //Insert data before the message wrap div
                        $(data).insertBefore(".message-wrap:first");
                        //Clear the textarea message
                        $("#message").val("");
                    
                    $("#form")[0].reset(); 
                    $('#preview').attr('src', "#");
                    $("#photo").val("");


                    }
                });
            });

The post button doesn’t work when I leave the image file. but when I leave the text blank and select the image from the computer then the post button works. I want the post button should be work when I leave the browse file. And After ajax success, the file browse should be empty.

<div class="c-header">
                        <div class="c-h-inner">
                            <ul>    
                                
                                <li><input type="file"  onchange="readURL(this);" style="display:none;" name="photo" id="photo"></li>
                                <li><img src="assets/icon/icon1.png"></img><a href="#" id="uploadTrigger" name="post_image">Add Photo</a></li>
                                
                            </ul>
                        </div>
                    </div>
                    <div class="c-body">
                        <div class="body-left">
                            <div class="img-box">
                                <img src="<?php echo 'assets/images/'.$image;?>"></img>
                                
                            </div>
                        </div>
                        <div class="body-right">
                            <textarea class="text-type" name="message"  id="message"
                     placeholder="What's on your mind?"></textarea>
                        </div>
                        <div id="body-bottom">
                        <img src="#"  id="preview"/>
                        </div>
                    </div>
                    <div class="c-footer">
                        <div class="right-box">
                            <ul>
                            
                                <li><input type="submit" name="save" id="save" value="Post" class="btn2"/></li>
                            </ul>
                            <br>
                        </div>

I am using js to show image preview.

ew 
<script type="text/javascript">

                         //Image Preview Function
                                $("#uploadTrigger").click(function(){
                                   $("#photo").click();
                                });
                                function readURL(input) {
                                    if (input.files && input.files[0]) {
                                        var reader = new FileReader();

                                        reader.onload = function (e) {
                                            $('#body-bottom').show();
                                            $('#preview').attr('src', e.target.result);
                                        }

                                        reader.readAsDataURL(input.files[0]);
                                    }
                                }

                        </script>

The image preview should be clear or remove after ajax success and post button should be work when i leave image to browse .

Answer

The file input should reset however you need to remove the preview image like:

var form_data = new FormData();
form_data.append('message', message)

var property = document.getElementById('photo').files;
property = property[0];
if(property){//you have to check if the files exists or it will fail trying to access properties from an undefined object
    
    var image_name = property.name;
    var image_extension = image_name.split('.').pop().toLowerCase();
    form_data.append("file",property);
}


success: function (data) {
                    //Insert data before the message wrap div
                    $(data).insertBefore(".message-wrap:first");
                    //Clear the textarea message
                    $("#message").val("");
                    
                    $("#form")[0].reset(); 
                    $('#preview').attr('src', "#");//Reset the preview to the original state

                }

If the file input is not resetting try to add $("#photo").val(""); inside the success function.

Advertisement

Answer