Images not displaying - Bad file descriptor - php

Question

This page works for showing everything but the images, which are stored in the public/uploads folder with filenames as "1.jpg", "2.jpg" etc. I seem to be unable to construct a query string that effectively retrieves the image. Need be, I can include the SQLite.
<?php
$page_name = 'gallery';
$nav_plantgallery_class = 'active_page';
// plant gallery requires login to access content
// if (is_user_logged_in()) {
// --- Upload Document ---
// Set maximum file size for uploaded files.
// MAX_FILE_SIZE must be set to bytes
// 1 MB = 1000000 bytes
define("MAX_FILE_SIZE", 1000000);
// feedback CSS classes
$file_feedback_class = 'hidden';
// $name_feedback_class = 'hidden';
$desc_feedback_class = 'hidden';
$name_feedback_class = 'hidden';
$genus_feedback_class= 'hidden';
// $desc_feedback_class = 'hidden';
$type_feedback_class = 'hidden';
$id_feedback_class='hidden';
// upload fields
$upload_name = NULL;
// $plant_name=
$upload_desc = NULL;
// $upload_source = NULL;
$upload_filename = NULL;
$upload_ext = NULL;
$upload_genus=
$upload_type=
$upload_plantid=NULL;
// sticky values
// Note: file uploads are not sticky!
// $sticky_name = '';
// $sticky_desc = '';
// $sticky_source = '';
$sticky_name = $sticky_genus=
$sticky_desc ='';
$sticky_plantid=
$sticky_planttype_groundcover = '';
$sticky_planttype_fern = '';
$sticky_planttype_flower = '';
$sticky_planttype_shrub = '';
$sticky_planttype_vine = '';
$sticky_planttype_tree = '';
$sticky_planttype_grass = '';
// Users must be logged in to upload files!
if (isset($_POST["upload"])) {
$upload_name = trim($_POST['name']); // untrusted
$upload_desc = trim($_POST['desc']); // untrusted
// $upload_source = trim($_POST['source']); // untrusted
$upload_genus= trim($_POST['genus']);
$upload_type= trim($_POST['type']);
$upload_plantid= trim($_POST['plant_id']);
// get the info about the uploaded files.
$upload = $_FILES['jpg-file'];
// Assume the form is valid...
$form_valid = True;
// file is required
if ($upload['error'] == UPLOAD_ERR_OK) {
// The upload was successful!
// Get the name of the uploaded file without any path
$upload_filename = basename($upload['name']);
// Get the file extension of the uploaded file and convert to lowercase for consistency in DB
$upload_ext = strtolower(pathinfo($upload_filename, PATHINFO_EXTENSION));
// This site only accepts JPG files!
if (!in_array($upload_ext, array('jpg'))) {
$form_valid = False;
}
} else {
// upload was not successful
$form_valid = False;
}
// name is required
if (empty($upload_name)) {
$form_valid = False;
$name_feedback_class = '';
}
// description is required
if (empty($upload_desc)) {
$form_valid = False;
$desc_feedback_class = '';
}
if (empty($upload_genus)) {
$form_valid = False;
$genus_feedback_class = '';
}
if (empty($upload_type)) {
$form_valid = False;
$type_feedback_class = '';
}
if (empty($upload_plantid)) {
$form_valid = False;
$id_feedback_class = '';
}
// // Record NULL (not empty string)
// if (empty($upload_source)) {
// $upload_source = NULL;
// }
if ($form_valid) {
// insert upload into DB
$result = exec_sql_query(
$db,
"INSERT INTO plants (plant_id, name, description, genus, type, file_name, file_ext) VALUES (:plant_id, :name, :description, :genus, :type, :file_name, :file_ext)",
array(
// ':user_id' => $current_user['id'],
':plant_id' => $upload_plantid,
':name' => $upload_name,
':description' => $upload_desc,
':genus' => $upload_genus,
':type' => $upload_type,
':file_name' => $upload_filename,
':file_ext' => $upload_ext,
// ':source' => $upload_source
)
);
if ($result) {
// We successfully inserted the record into the database, now we need to
// move the uploaded file to it's final resting place: public/uploads directory
// get the newly inserted record's id
$record_id = $db->lastInsertId('id');
// uploaded file should be in folder with same name as table with the primary key as the filename.
// Note: THIS IS NOT A URL; this is a FILE PATH on the server!
// Do NOT include / at the beginning of the path; path should be a relative path.
// NO: /public/...
// YES: public/...
$id_filename = 'public/uploads/documents/' . $record_id . '.' . $upload_ext;
// Move the file to the public/uploads/documents folder
// Note: THIS FUNCTION REQUIRES A PATH. NOT A URL!
move_uploaded_file($upload["tmp_name"], $id_filename);
}
} else {
// file uploads are not sticky!
// user must reselect file, show file feedback when showing feedback!
$file_feedback_class = '';
$sticky_name = $upload_name;
$sticky_desc = $upload_desc;
$sticky_genus= $upload_genus;
$sticky_type= $upload_type;
$sticky_plantid=$upload_plantid;
// $sticky_source = $upload_source;
}
}
// --- Document Records ---
// query the database for the grade records
$records = exec_sql_query(
$db,
"SELECT * FROM plants ORDER BY file_name ASC;",
)->fetchAll();
// }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<name><?php echo $page_name; ?> - plants</name>
<link rel="stylesheet" type="text/css" href="/public/styles/site.css" media="all" />
</head>
<body>
<?php include('includes/header.php'); ?>
<main class="plantgallery">
<section class="gallery">
<h2><?php echo $page_name; ?></h2>
<?php
// if (is_user_logged_in()) {
// Only show the documents gallery if we have records to display.
if (count($records) > 0) { ?>
<ul>
<?php
foreach ($records as $record) { ?>
<li>
<a href="/document?<?php echo http_build_query(array('id' => $record['id'])); ?>">
<img class="flower" src="/public/uploads/<?php echo $record['id'] . '.' . $record['file_ext']; ?>" alt="<?php echo htmlspecialchars($record['id']); ?>" />
<p><?php echo ucfirst($record['plant_name']); ?></p>
</a>
</li>
<?php
} ?>
</ul>
<?php
} else { ?>
<p>Gallery is <em>empty</em>.</p>
<?php } ?>
<?php if ($is_admin() && is_user_logged_in()) {?>
<section class="upload">
<h2>Upload Plant</h2>
<form action="/" method="post" enctype="multipart/form-data" novalidate>
<!-- MAX_FILE_SIZE must precede the file input field -->
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo MAX_FILE_SIZE; ?>" />
<p class="feedback <?php echo $file_feedback_class; ?>">Please select an JPG file.</p>
<div class="label-input">
<label for="upload-file">JPG File:</label>
<input id="upload-file" type="file" name="jpg-file" accept=".jpg,image/jpg" />
</div>
<p class="feedback <?php echo $name_feedback_class; ?>">Please provide a name.</p>
<div class="label-input">
<label for="upload-name">Plant name:</label>
<input id='upload-name' type="text" name="name" placeholder="plant name" value="<?php echo htmlspecialchars($sticky_name); ?>" />
</div>
<p class="feedback <?php echo $desc_feedback_class; ?>">Please provide a description.</p>
<div class="label-input">
<label for="upload-desc">Description:</label>
<textarea id="upload-desc" name="desc" rows="5" placeholder="plant description."><?php echo htmlspecialchars($sticky_desc); ?></textarea>
</div>
<p class="feedback <?php echo $genus_feedback_class; ?>">Please provide a genus.</p>
<div class="label-input">
<label for="upload-genus">Genus:</label>
<input id='upload-genus' type="text" name="genus" placeholder="plant genus" value="<?php echo htmlspecialchars($sticky_genus); ?>" />
</div>
<p class="feedback <?php echo $id_feedback_class; ?>">Please provide a plant ID.</p>
<div class="label-input">
<label for="upload-id">name:</label>
<input id='upload-id' type="text" name="id" placeholder="plant id" value="<?php echo htmlspecialchars($sticky_plantid); ?>" />
</div>
<!-- <div class="label-input">
<label for="upload-source" class="optional">Source URL:</label>
<input id='upload-source' type="url" name="source" placeholder="URL where found. (optional)" value="<?//php echo htmlspecialchars($sticky_source); ?>" />
</div> -->
<div class="align-right">
<button type="submit" name="upload">Upload Plant</button>
</div>
</form>
</section>
<?php
// } else {
?>
<!-- <p>Please login to access your plant gallery.</p> -->
<?php
//echo_login_form('/', $session_messages);
?>
<?php
}
?>
</main>
<?//php include("includes/footer.php"); ?>
</body>
</html>

Answer 1

You save your files into public/uploads/documents/ but take from different folder public/uploads/. Try to fix the src path like this
<?php
foreach ($records as $record) { ?>
<li>
<a href="/document?<?php echo http_build_query(array('id' => $record['id'])); ?>">
<img class="flower" src="/public/uploads/documents/<?php echo $record['id'] . '.' . $record['file_ext']; ?>" alt="<?php echo htmlspecialchars($record['id']); ?>" />
<p><?php echo ucfirst($record['plant_name']); ?></p>
</a>
</li>
<?php
} ?>