BLOB Image returning broken image

Question

I've found a lot of solutions on SO that worked for others, but not for me! Guidance in the correct direction would be appreciated.

Note: I know a lot of people may not be a fan of storing images in blobs, but for my particular application it is suffice.

Snippet of HTML Code on Upload page (this is within a form that has other data):

<div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Summary Image</label>
                        <br /><input name="summaryImage" id="imgInp1" type="file" accept="image/*"  onchange="Prev1(this)" />
                        <br /><img id="imgPrev1" src="" alt="Summary Image Preview" style="width:99%; height: 400px; margin-top:10px;" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Article Image</label>
                        <br /><input name="articleImage" id="imgInp2" type="file" accept="image/*"  onchange="Prev2(this)" />
                        <br /><img id="imgPrev2" src="" alt="Article Image Preview" style="width:99%; height: 400px; margin-top:10px;" />
                </div>
            </div>
        </div>

Snippet of PHP code on Upload page

//Summary Image
$summaryimage = $_FILES['summaryImage'];
if(is_uploaded_file($_FILES['summaryImage']['tmp_name']) && getimagesize($_FILES['summaryImage']['tmp_name']) != false)
{
    // Gather image info
    $size = getimagesize($_FILES['summaryImage']['tmp_name']);
    // Assign variables
    $type = $size['mime'];
    $imgfp = fopen($_FILES['summaryImage']['tmp_name'], 'rb');
    $size = $size[3];
    $name = $_FILES['summaryImage']['name'];
    $summaryimagesize = $_FILES['summaryImage']['size'];
    $maxsize = 15728640;


    // Check image file size
    if($summaryimagesize < $maxsize ) {
        //Image size checks out, insert blob into database
        mysql_query("UPDATE projects 
                        SET summaryimage='$summaryimage', summaryimagesize='$summaryimagesize' 
                    WHERE job='$job'") or die (mysql_error());;

        } else if($summaryimagesize > $maxsize) {
        // Image file size too big
        header("LOCATION: /projects.php?message=imagesize");
        }
    } else {
    // Any other error
    header("LOCATION: /projects.php?message=imageformat");
    }

    //Article Image
    $articleimage = $_FILES['articleImage'];
    if(is_uploaded_file($_FILES['articleImage']['tmp_name']) && 
        getimagesize($_FILES['articleImage']['tmp_name']) != false)
    {
        // Gather image info
        $size = getimagesize($_FILES['articleImage']['tmp_name']);
        // Assign variables
        $type = $size['mime'];
        $imgfp = fopen($_FILES['articleImage']['tmp_name'], 'rb');
        $size = $size[3];
        $name = $_FILES['articleImage']['name'];
        $articleimagesize = $_FILES['articleImage']['size'];
        $maxsize = 15728640;

        // Check image file size
        if($articleimagesize < $maxsize ) {
            //Image size checks out, insert blob into database
             mysql_query("UPDATE projects SET articleimage='$articleimage', articleimagesize='$articleimagesize' WHERE job='$job'") or die (mysql_error());;

            } else if($articleimagesize > $maxsize) {
            // Image file size too big
            header("LOCATION: /projects.php?message=imagesize");
            }
        } else {
        // Any other error
        header("LOCATION: /projects.php?message=imageformat");
        }

    header("LOCATION: /projects.php?message=success");

}

The database stores the blob as a longblob type, no problems:

Code I'm using to encode the image and display it:

<?php echo '<img src="data:image/jpeg;base64,' . base64_encode( $post['summaryimage'] ) . '" />'; ?>

What the page shows:

When I right click > copy image location:

data:image/jpeg;base64,QXJyYXk=

Answer 1

QXJyYXk= is base64 for array so you're storing array data instead of an image.

The fix is to grab the contents of the image and store that instead:

 $summaryimage = file_get_contents($_FILES['summaryImage']['tmp_name']);

Since you're not using prepared statements, you should escape quotes:

 $summaryimage = addslashes(file_get_contents($_FILES['summaryImage']['tmp_name']));

When displaying you should remove them again before encoding them:

base64_encode(stripslashes($post['summaryimage']))

Answer 2

Using @Xorifelse's answer, I was able to lead myself to a working solution after playing around for about an hour.

Because this was an SQL query, I can't have any ' in the binary because it will break it (who knew it would have special characters?!). So I used $summaryimage = mysql_real_escape_string(file_get_contents($_FILES['summaryImage']['tmp_name']));

All is working now when displaying the image :)