How to merge 2 clicks correctly?

Question

JavaScript

Good day.
How to merge 2 clicks? The first one adds an image to a folder on the server, the second one updates the block on the page.

<script>
    $(document).ready(function(){

        $("#but_upload").click(function(){

            var fd = new FormData();
            var files = $('#file')[0].files[0];
            fd.append('file',files);

            $.ajax({
                url: 'upload.php',
                type: 'post',
                data: fd,
                contentType: false,
                processData: false,
                success: function(response){
                    if(response != 0){
                        $("#img").attr("src",response);
                        $(".preview img").show(); // Display image element
                    }else{
                        alert('file not uploaded');
                    }
                },
            });
            $.post('gallery.php', {refresh:'but_upload'}, function success(data){
                $('#img-box').html(data);
            });
            return false;
        });
    });
</script>

Answer 1

You can save the result of loading a file into a variable or into a data attribute and check it in the handler: if there is no result, then load the file, and if there is, then update the block.