How to check the ajax response for errors list

Question

So I am using ajax and php to 'create a post' which allows you to upload images along with text. Currently I have the php working to check if the post has any content and if it has an image, and validating everything. However the problem is when I get a response I am prepending it to the post feed, but this makes it so that when there is an error it also prepends it to the feed. What I would like to do is append the errors to a separate div called errors. Here is my php (I'm just starting with php and if something is wrong or could have been done easier with less work, please let me know.)

<?php
require_once('../dbconnect.php');
include_once( INCLUDES_PATH .'functions.php');

$body = $_POST["body"];
$image = 'image';
$user_id = $_SESSION['user_id'];

if( empty($_FILES[$image]['name']) ){
$has_image = 0;
}else{
$has_image = 1;
}

$postEmpty = 0;

if( empty($_FILES[$image]['name']) && empty($body) ){
$postEmpty = 1;
die();
}

// validate post

if( $postEmpty == 0 && !empty($body) ){

    $cleanBody = clean_input($body);

}

// validate image (if any)

if( $has_image == 1 ){

    //check if directory exist if not create it
    if (!file_exists(HOME_PATH ."users/user_".$user_id)) {
        mkdir(HOME_PATH ."users/user_".$user_id, 0777, true);
    }
    if (!file_exists(HOME_PATH ."users/user_".$user_id."/posts")) {
        mkdir(HOME_PATH ."users/user_".$user_id."/posts", 0777, true);
    }
    //Set file upload path
    $path = "../users/user_".$user_id."/posts/"; //with trailing slash
    //Set max file size in bytes
    $max_size = 2000000;
    //Set default file extension whitelist
    $whitelist_ext = array('jpeg','jpg','png','gif');
    //Set default file type whitelist
    $whitelist_type = array('image/jpeg', 'image/jpg', 'image/png','image/gif');

    // Create an array to hold any output
    $errors = array();

    // Get filename
    $file_info = pathinfo($_FILES[$image]['name']);
    $name = $file_info['filename'];
    $ext = $file_info['extension'];

    //Check file has the right extension           
    if (!in_array($ext, $whitelist_ext)) {
        $errors[] = "Invalid file Extension";
    }

    //Check that the file is of the right type
    if (!in_array($_FILES[$image]["type"], $whitelist_type)) {
        $errors[] = "Invalid file Type";
    }

    //Check that the file is not too big
    if ($_FILES[$image]["size"] > $max_size) {
        $errors[] = "File is too big";
    }

    //If $check image is set as true
    if (!getimagesize($_FILES[$image]['tmp_name'])) {
        $errors[] = "Uploaded file is not a valid image";
    }

    //Create full filename including path
    if ($random_name) {
    // Generate random filename
        $tmp = str_replace(array('.',' '), array('',''), microtime());

    if (!$tmp || $tmp == '') {
        $errors[] = "File must have a name";
    }     
        $newname = $tmp.'.'.$ext;                                
    } else {
        $newname = $name.'.'.$ext;
    }

    //Check if file already exists on server
    if (file_exists($path.$newname)) {
        $errors[] = "A file with this name already exists";
    }

    if (count($errors)>0) {
    //The file has not correctly validated
        $imageError = 1;
    }

// if no errors:

    // upload image (if any) and retrieve filename
    if( $imageError == 1 ){

        foreach($errors as $error) {
            echo '<li>'.$error.'</li>';
            die();
        }

    }else{

        //Create full filename including path
        // Generate random filename
        $tmp = str_replace(array('.',' '), array('',''), microtime());

        if (!$tmp || $tmp == '') {
            $errors[] = "File must have a name";
        }     

        $newname = $tmp.'.'.$ext;                                

        //Check if file already exists on server
        if (file_exists($path.$newname)) {
            $errors[] = "A file with this name already exists";
        }

        if (count($errors)>0) {
        //The file has not correctly validated
            $imageError = 1;
            foreach($errors as $error) {
                echo '<li>'.$error.'</li>';
                die();
            }
        } 
      if (move_uploaded_file($_FILES[$image]['tmp_name'], $path.$newname)) {

            $uploadSuccesfull = 1;

        }else {
            $errors[] = "Server Error!";
            foreach($errors as $error) {
                echo '<li>'.$error.'</li>';
                die();
            }
        }

    }
}


// if no errors:

// save post (with filename if any); if it fails, delete image (if any)
if( $has_image == 1 ){

$query = "INSERT INTO posts
        (user_id, body, image, has_image, date)
        VALUES
        ('$user_id', '$body', '$newname', '$has_image', now())";

}else{

    $query = "INSERT INTO posts
        (user_id, body, has_image, date)
        VALUES
        ('$user_id', '$body', '$has_image', now())";

}

$result = $db->query($query);

// send response

//check to make sure the user was added
if( $db->affected_rows == 1 ){

    $user_id = $_SESSION['user_id'];

    $post_id = $db->insert_id;

    $query = "SELECT post_id, body, image, has_image
            FROM posts
            WHERE post_id = $post_id
            LIMIT 1";
    $result = $db->query($query);

    if($result->num_rows == 1){
        $row = $result->fetch_assoc();
    }

    $queryuser = "SELECT *
                FROM users
                WHERE user_id = $user_id
                LIMIT 1";
    $resultuser = $db->query($queryuser);
    if($resultuser->num_rows == 1){
        $rowuser = $resultuser->fetch_assoc();
    }


if(!empty($row['avatar'])){ $userpic = $row['avatar']; }else{ $userpic = HOME_URL . 'img/avatar.jpg'; }

    if($row['has_image'] == 1){

?>
<article class="post">
    <div class="post-head cf">
        <a class="userpic" href=""><img src="<?php echo $userpic ?>" alt="<?php echo $rowuser['username'] ?>"></a>
        <a href="" class="username">
            <?php echo $rowuser['username']; ?>
        </a>
    </div>
    <img src="users/user_<?php echo $rowuser['user_id'] ?>/posts/<?php echo $row['image']; ?>" alt="">
    <div class="post-body">
        <div class="post-options">
            <a class="likes" href="">156 likes</a>
        </div>
        <p>
            <a class="username" href="">
                <?php echo $rowuser['username'] ?>
            </a>
            <?php echo $row['body'] ?>
        </p>
        <hr />
        <div class="cf">
            <a class="like hide-text" href="javascript:;">Like This Post</a>
            <form action="" class="comment">
                <input type="text" placeholder="Add a comment">
            </form>
        </div>
    </div>
</article>
<?php }else{ ?>

    <article class="post no-img">
        <div class="post-head cf">
            <a class="userpic" href=""><img src="<?php echo $userpic ?>" alt="<?php echo $rowuser['username'] ?>"></a>
            <a href="" class="username">
                <?php echo $rowuser['username'] ?>
            </a>
        </div>
        <div class="post-body">
            <p>
                <a class="username" href="">
                    <?php echo $rowuser['username'] ?>
                </a>
                <?php echo $row['body'] ?>
            </p>
            <div class="post-options">
                <a class="likes" href="">1 like</a>
            </div>
            <hr />
            <div class="cf">
                <a class="like hide-text" href="javascript:;">Like This Post</a>
                <form action="" class="comment">
                    <input type="text" placeholder="Add a comment">
                </form>
            </div>
        </div>
    </article>

    <?php }
    }else{

        echo 'There was a database error';

    }

die();

Here is my ajax call

$.ajax({
        type: "post",
        url: "includes/create-post.php",
        data: new FormData(this),
        processData: false,
        contentType: false,
        error: function (response) {
            console.log(response);
        },
        success: function (response) {

            $('section.feed').prepend(response);

            $('article.post p').each(function () {
                $(this).html(linkHashtags($(this).html()));
            });

            $('article.post p').each(function () {
                $(this).html(linkatsymbols($(this).html()));
            });
            revealPosts();

        }
    });

Answer 1

For the die() you can simply put the statement die out of foreach like this:

if( $imageError == 1 ){
    foreach($errors as $error) {
        echo '<li>'.$error.'</li>';
    }
    die();
}
.
.
.
.
.
.
if (count($errors)>0) {
    //The file has not correctly validated
    $imageError = 1;
    foreach($errors as $error) {
        echo '<li>'.$error.'</li>';
    }
    die();
}
if (move_uploaded_file($_FILES[$image]['tmp_name'], $path.$newname)) {

    $uploadSuccesfull = 1;

}
else {
    $errors[] = "Server Error!";
    foreach($errors as $error) {
        echo '<li>'.$error.'</li>';
    }
    die();
}

But since you want to display the errors in some other element, you need a way to check whether the output you are receiving is an error. So try replacing your code with this:

// if no errors:

// upload image (if any) and retrieve filename
if( $imageError == 1 ){

    $ret_data = ['items' => $errors, 'responseCode' => 0];
    //content in $items must be in UTF-8
    echo json_encode($ret_data);

    die();
}
else{

    //Create full filename including path
    // Generate random filename
    $tmp = str_replace(array('.',' '), array('',''), microtime());

    if (!$tmp || $tmp == '') {
        $errors[] = "File must have a name";
    }     

    $newname = $tmp.'.'.$ext;                                

    //Check if file already exists on server
    if (file_exists($path.$newname)) {
        $errors[] = "A file with this name already exists";
    }

    if (count($errors)>0) {
    //The file has not correctly validated
        $imageError = 1;

        $ret_data = ['items' => $errors, 'responseCode' => 0];
        //content in $items must be in UTF-8
        echo json_encode($ret_data);

        die();
    } 
    if (move_uploaded_file($_FILES[$image]['tmp_name'], $path.$newname)) {

        $uploadSuccesfull = 1;

    }
    else {
        $errors[] = "Server Error!";

        $ret_data = ['items' => $errors, 'responseCode' => 0];
        //content in $items must be in UTF-8
        echo json_encode($ret_data);

        die();
    }

  }
}

And in your AJAX success call do something like this:

success: function (response) {
        var obj = JSON.parse(response);
        var errorCode = obj.responseCode;
        var errorSet = obj.items;
        if(errorCode == 0) {
                $.each(errorSet, function(i, v) {
                      console.log('<li>'+v+'</li>');
                }
         }
         //Your rest of the code

BTW, its better if you separate your code from your design.