How to get Mysqli image in database to show up in div - php

Question

The div that I want the image to be displayed in (form is sent to send_post.php):
<div style="width:200px ; height: 200px ; border:1px dashed red ; display:inline-block ; margin-top:5px ; margin-left:5px" class="postedBy"></div><!--end image-->
This aforementioned div is located inside this container div:
<div style="height:800px ; width:800px ; border:1px dashed black ; margin-left:200px ; float:left ; margin-top:50px" id= "profilePosts"></div>
Code from send_post.php:
<?php
session_start();
if(!isset($_SESSION['username'])) {
header('location: mustLogin.php');
} else {
$username = $_SESSION['username'];
}
$title = $_POST['title'];
$description = $_POST['description'];
$image = $_POST['image'];
$dateAdded = date('Y-m-d');
$addedBy = $username;
if (!empty('title') && !empty('description') && !empty('image')) {
//establish connection to SQL
$conn = mysqli_connect("localhost", "root", "") or die ("Couldn't connect to SQLI");
//connect to DB
mysqli_select_db($conn, "accounts") or die ("Couldn't find DB");
$sqliCommand = "INSERT INTO `posts` (title, description, image, date_added, added_by) VALUES ('$title', '$description', '$image', '$dateAdded', '$addedBy')" or die ('Info couldnt go to database');
mysqli_query($conn, $sqliCommand) or die ('MySQLI error');
header('location: profile.php?user='.$username);
} else {
header('location: error.php');
}
?>
The info get's sent to the database just fine, but can someone explain to me how I can get the images added by the user (all of them) to display in the first div I listed?

Answer 1

You need to create a separate url just to return the retrieved image from DB by image type in header
So after your selection in a for loop you can have something like
<?php
$sqliCommand = "SELECT * FROM `posts` WHERE `added_by` = '{$this->username}'";
$result = mysqli_query($conn, $sqliCommand);
while ($row = mysqli_fetch_assoc($result)) {
?>
<div style="width:200px ; height: 200px ; border:1px dashed red ; display:inline-block ; margin-top:5px ; margin-left:5px" class="postedBy">
<img src="/imgView.php?imgId=<?php echo $row['id'] ?>"
</div>
<?php
}
?>
Now what you need is to create a page for imgView.php which contains something like
<?php
$imgId = $_GET['imgId'];
if (!empty($imgId)) {
$sqliCommand = "SELECT `image` FROM `posts` WHERE `id` = '$imgId'";
$result = mysqli_query($conn, $sqliCommand);
$row = mysqli_fetch_assoc($result));
header("Content-Type: image/jpeg"); // or whatever the correct content type is.
echo $row['image']; //if your image is encoded you can decode it here, too.
}
?>
I would also recommend to save the MIME type while you are inserting so that you be able to use a proper header Content-Type

Answer 2

Upload form:
<form action="/image_upload.php" method="POST" enctype="multipart/form-data">
<label>Title:</label>
<input type="text" name="title">;
<label>Description:</label>
<textarea name="description"></textarea>
<label>Upload Image:</labe>
<input type="file" name="avatar" accept="image/*">
<button type="submit">Upload</button>
</form>
Upload script (image_upload.php):
session_start();
if(!isset($_SESSION['username']))
{
header('location: mustLogin.php');
exit;
}
else
{
if($_FILES != null) //uploaded files are held in $_FILES array
{
$username = $_SESSION['username'];
$title = $_POST['title'];
$description = $_POST['description'];
$dateAdded = date('Y-m-d');
$addedBy = $username;
if ($title != "" && $description != "" && !empty($_FILES))
{
$new_file_name = uniqid() . "-" . $username . "-upload";
$file_path = 'images/' . $new_file_name; //images haves to be a directory in the same directory that this script runs
$uploaded_file = move_uploaded_file($_FILES['tmp_name'], $file_path );
if($uploaded_file == TRUE)
{
$conn = mysqli_connect("localhost", "root", "") or die ("Couldn't connect to SQLI");
//connect to DB
mysqli_select_db($conn, "accounts") or die ("Couldn't find DB");
/* You should change this while query to a prepared statement for security reasons */
$sqliCommand = "INSERT INTO `posts` (title, description, image, date_added, added_by) VALUES ('$title', '$description', '$file_path', '$dateAdded', '$addedBy')" or die ('Info couldnt go to database');
mysqli_query($conn, $sqliCommand) or die ('MySQLI error');
header('location: profile.php?user='.$username);
}
else
{
echo "Could not upload file.";
}
}
else
{
echo "Missing title or description, or file array is empty.";
}
}
else
{
echo "No file uploaded.";
}
}
Display images in profile:
session_start();
$username = $_SESSION['username'];
$conn = new mysqli("localhoast", "root", "", "accounts") or die('Connect Error (' . $conn->connect_errno . ') ' . $conn->connect_error);
$sql = "SELECT * FROM `posts` WHERE added_by = ?";
$query = $conn->stmt_init();
$query = $query->prepare($sql);
$query->bind_param('s',$username);
$query->execute();
$images = $query->get_result();
if($images->num_rows > 0)
{
while($image = $images->fetch_assoc())
{
?>
<div style="width:200px ; height: 200px ; border:1px dashed red ; display:inline-block ; margin-top:5px ; margin-left:5px" class="postedBy">
<img src="<?php echo $image['image']; ?>">
</div><!--end image-->
<?php
}
}
You should upload the images to a directory, then keep track of where these images are in the database. Then just link to those images from the information you get out of the database. I didnt test this but the algorithm should all be there. I would suggest changing your insert query to a prepared statement, like i used in the profile section, and you might want to look into something like https://github.com/samayo/bulletproof to make sure people don't upload files which are not actually images.