How do I display a BLOB Image from MySQL?

[Anonymous]

Hi,

I have been spending weeks trying to display images from MySQL Blob. Initially, I got a small box with a gibberish display, after trying out all the samples I could find on YouTube as well as StackOverFlow, I am still unable to display the image I have on MySQL.

This is as far as I could go.



I am not sure what are the things that will be helpful to you to help me but I will share the upload codes as well as the display codes below.

Upload:-

<?php
    session_start();
    $_SESSION['message'] = '';
    $dbconn = new mysqli('localhost', 'root', 'nimda', 'mydatabase003');           // Establish database connection.

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {//This is to ensure that a submit button is pressed.
    // First validation - ensure two passwords are matched.
        if ($_POST['password'] == $_POST['confirmpassword']) {//password and confirmpassword is the name of the input txtbox

$username = mysqli_real_escape_string($dbconn,$_POST['username']);
$email = mysqli_real_escape_string($dbconn,$_POST['email']);
$password = md5($_POST['password']); //md5 hash password security
$avatar_name = addslashes($_FILES['avatar']['name']);
$avatar = addslashes(file_get_contents($_FILES['avatar']['tmp_name']));
$avatar = base64_encode($avatar);
//$avatar_path = mysqli_real_escape_string($dbconn,'avatar/'.$_FILES['avatar']['name']);

        //images stored in image folder, access using global variable
        // $_FILES global variable is access using the avatar name
        // same as the name of the input.

        // Second validation - ensure file type is image
    if (preg_match("!image!", $_FILES['avatar']['type'])) {
        $_SESSION['username'] = $username;
        $_SESSION['avatar'] = $avatar;

$sql = "INSERT INTO user_details (username, email, password, avatar_name, avatar)"
. "VALUES ('$username', '$email', '$password', '$avatar_name', '$avatar')";

        // if the query is successful, redirect to welcome page, done!
    if (mysqli_query($dbconn, $sql)=== true){
$_SESSION['message'] = "Registration successful! Added $username to the database!";
        header("location: welcome.php");
            } else {
$_SESSION['message'] = "Registration failed! User could not be added to the database!";             } 
    } else {
            $_SESSION['message'] = "Please only upload GIF, JPG, JPEG, or PNG images";
        }
    } else {
        $_SESSION['message'] = "Passwords does not match";   
    }
}
?>

<link href="//db.onlinewebfonts.com/c/a4e256ed67403c6ad5d43937ed48a77b?family=Core+Sans+N+W01+35+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="blob.css" type="text/css">
<div class="body-content">
  <div class="module">
    <h1>Create an account</h1>
    <form class="form" action="blob.php" method="post" enctype="multipart/form-data" autocomplete="off">
      <div class="alert alert-error"><?= $_SESSION['message'] ?></div>
      <input type="text" placeholder="User Name" name="username" required />
      <input type="email" placeholder="Email" name="email" required />
      <input type="password" placeholder="Password" name="password" autocomplete="new-password" required />
      <input type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password" required />
      <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
      <div class="avatar"><label>Select your avatar: </label><input type="file" name="avatar" accept="image/*" required /></div>
      <input type="submit" value="Register" name="register" class="btn btn-block btn-primary" />
    </form>
  </div>
</div>

Display:-

<link rel="stylesheet" href="blob.css">

<?php
    session_start();
?>
<div class="body content"></div>
    <div class="Welcome"></div>
        <div class="alert alert-success"><?=$_SESSION['message'] ?></div>
        <span class="user"><img src='<?= $_SESSION['avatar']?>'> </span> <br />
        Welcome <span class="user"> <?= $_SESSION['username']?> </span>

    <?php

    $dbconn = new mysqli('localhost', 'root', 'nimda', 'mydatabase003'); // Establish database connection.
    $sql = "SELECT username, avatar FROM user_details";
    $result = mysqli_query($dbconn, $sql); //$result = mysqli_result object

    ?>

    <div id = "registered">
        <span>All registered users:</span>
        <?php 
        while($row=mysqli_fetch_assoc($result)) {
            echo "<div class='userlist'><span>$row[username]</span> <br/>";
//          echo "<img src='file_get_contents($row[avatar])'></div>";
            echo "<img src= 'data:image;base64,'.$row[2].'";
        }
        ?>
    </div>

Show all:-

<?php
// verify request id.
if (empty($_GET['id']) || !is_numeric($_GET['id'])) {
echo 'A valid image file id is required to display the image file.';
exit;   }

    $imageId = $_GET['id'];
    //connect to mysql database
    if ($conn = mysqli_connect('localhost', 'root', 'nimda', 'mydatabase003')) {
        $content = mysqli_real_escape_string($conn, $content);
        $sql = "SELECT username, avatar FROM user_details where id = {$avatar}";
        if ($rs = mysqli_query($conn, $sql)) {
            $imageData = mysqli_fetch_array($rs, MYSQLI_ASSOC);
            mysqli_free_result($rs);
        } else {
            echo "Error: Could not get data from mysql database. Please try again.";
        }
        //close mysqli connection
        mysqli_close($conn);
    } else {
        echo "Error: Could not connect to MySQL database. Please try again.";
    }   
    if (!empty($imageData)) {
        // show the image.
        header("Content-type: {$imageData['type']}");
        echo $imageData['content'];``
    }
?>

I am at wits end trying to solve this problem. I would appreciate if someone could assist me on this matter.

The server that I am using is Microsoft IIS, Language used is PHP, database is MySQL 5.5

Thank you in advance,
Justin