Form connection issue


Hey all :blush:
**Error:**File is an image - image/jpeg.Sorry, there was an error uploading your file.
Code

 
     <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Upload Photo/Text</button>
  <div id="myDropdown" class="dropdown-content">
     <form action="upcontent.php" method="post" enctype="multipart/form-data">
  
  <input type="file" name="fileToUpload" id="fileToUpload">
   <br><br>     
     Words: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
   <input type="submit" value="Submit" name="submit">
</form>
  </div>
</div>  
  <br>
  <br>
<div class="row row-cols-1 row-cols-md-2 g-4">
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);     
$mysqli = new mysqli("db5004526329.hosting-data.io", "dbu1026002", "meka%1981", "dbs3781610");
$query = "SELECT username,comment,image FROM tbl_member ORDER BY ID DESC";
$result = $mysqli->query($query);

//  Loop thru comments and display all of them
while($row = $result->fetch_array(MYSQLI_ASSOC) ) {
    printf("%s (%s)\n", $row["username"], $row["comment"],$row["image"]); 
?>
    <div class="col">
        <a href="pro.php">
            <div class="card">
                 <img src="<?php echo $row['image']; ?>" class="card-img-top" alt="...">
	        <div class="card-body">
                    <h5 class="card-title"><?php echo $row["username"];?></h5>
                    <p class="card-text"><?php echo $row["comment"];?></p>
                </div>
            </div>
        </a>
    </div>
</div>
<?PHP
}
?>

File upload code

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
if (empty($_POST["comment"])) {
   $comment = "";
 } else {
   $comment = test_input($_POST["comment"]);
 }
 }
?>

The dropdown form content doesn’t show up on the car…instead get the error. Where do I fix so both work together?
Also when I try to upload and write within the dropdown it doesn’t stay open for me to do both at once. how to fix that?

Thank ya for the help :yellow_heart:
?>

My suggestion you is to try to keep the PHP and HTML separated as much of possible, for example I have the HTML form on the bottom:

<form id="formData" class="checkStyle" action="create.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="cms[user_id]" value="3">
    <input type="hidden" name="cms[author]" value="<?= Login::full_name() ?>">
    <input type="hidden" name="action" value="upload">
    <div class="file-style">
        <input id="file" class="file-input-style" type="file" name="image">
        <label for="file">Select file</label>
    </div>
    <select class="select-css" name="cms[page]">
        <option value="index">Home</option>
        <option value="blog" selected>Blog</option>
        <option value="about">About</option>
    </select>
    <div class="heading-style">
        <label class="heading_label_style" for="heading">Heading</label>
        <input class="enter_input_style" id="heading" type="text" name="cms[heading]" value="" tabindex="1" required
               autofocus>
    </div>
    <div class="content-style">
        <label class="text_label_style" for="content">Content</label>
        <textarea class="text_input_style" id="content" name="cms[content]" tabindex="2"></textarea>
    </div>
    <div class="submit-button">
        <button class="form-button" type="submit" name="submit" value="enter">submit</button>
    </div>
</form>

Second I would store the data (text and the file path (or name) in the database table and the actual image file in a directory. You can then be pretty sure that the image is unique by the database table by writing some PHP code and you can also check against the actual file itself. That’s for another discussion as the main going is to get it working. Then on top of your page (or in a different Page) process the form result. A tip try to keep your naming of the variables that have meaning and as short as possible (after all us coders are lazy in that department :joy: ). Here’s just a brief example from my upload code that is located at the top of the file.

if (($_SERVER['REQUEST_METHOD'] === 'POST') && isset($_POST['submit'], $_FILES['image'])) {
    $data = $_POST['cms']; // Data for the Database Table:

    $errors = array();
    $exif_data = [];
    
    $file_size = $_FILES['image']['size'];
    $file_tmp = $_FILES['image']['tmp_name'];  // Temporary file for thumbnails directory:
    $file_type = $_FILES['image']['type'];
    $file_ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));

    /*
     * Set EXIF data info of image for database table that is
     * if it contains the info otherwise set to null.
     */
    if ($file_ext === 'jpeg' || $file_ext === 'jpg') {

HTH a little bit and I couldn’t tell if you are setting the HTML form properly this is what I mean:

<form id="formData" class="checkStyle" action="create.php" method="post" enctype="multipart/form-data">

Here’s the code’s result in action - https://phototechguru.com/ and if you want to look at more code for the website I have a GitHub repository - https://github.com/Strider64/phototechguru

1 Like

@Strider64, there is no need to check isset($_POST[‘submit’]. In fact, that very part could cause your app to fail in certain cases. Checking the REQUEST METHOD as you have shown is correct and sufficient.

1 Like

Hey to both @Strider64 & @benanamen :blush:

Sir @Strider64 Thank ya for the insight but Im not getting the correlation of how your code helps my code. I have everything in place(files, DB, etc) in place just need help connecting the dots. Want my HTML form

 <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Upload Photo/Text</button>
  <div id="myDropdown" class="dropdown-content">
     <form action="upcontent.php" method="post" enctype="multipart/form-data">
 <input type="file" name="fileToUpload" id="fileToUpload">
   <br><br>   
     Words: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
   <input type="submit" value="Submit" name="submit">
</form>
  </div>
</div>  

To connect to thise card:

<div class="row row-cols-1 row-cols-md-2 g-4">
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);     
$mysqli = new mysqli("db5004526329.hosting-data.io", "dbu1026002", "meka%1981", "dbs3781610");
$query = "SELECT username,comment,image FROM tbl_member ORDER BY ID DESC";
$result = $mysqli->query($query);

//  Loop thru comments and display all of them
while($row = $result->fetch_array(MYSQLI_ASSOC) ) {
    printf("%s (%s)\n", $row["username"], $row["comment"],$row["image"]); 
?>
    <div class="col">
        <a href="pro.php">
            <div class="card">
                 <img src="<?php echo $row['image']; ?>" class="card-img-top" alt="...">
	        <div class="card-body">
                    <h5 class="card-title"><?php echo $row["username"];?></h5>
                    <p class="card-text"><?php echo $row["comment"];?></p>
                </div>
            </div>
        </a>
    </div>
</div>
<?PHP
}
?>

Connection file

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
if (empty($_POST["comment"])) {
   $comment = "";
 } else {
   $comment = test_input($_POST["comment"]);
 }
 }
?>

The final result hopefully will be:

I get error messages because the form dosen’t connect to the card display

Sponsor our Newsletter | Privacy Policy | Terms of Service