Jesse Elser Jesse Elser - 1 month ago 7
PHP Question

PHP Upload Multiple Images While Inserting Multiple "Select" Data Into Mysql

I have an image upload page with the following:

A multiple select box which has 9 categories listed.
A text input field of what the image alt text will be.
A multiple file upload field.

The goal is to be able to upload multiple images at once, store the text input for the alt text with each, and also store any of the selected categories with each.

The script I wrote isn't necessarily failing since the error I'm getting is the one built into the script

Sorry, there was a problem uploading your images.
.

The entire page is here:

<?php
include($_SERVER['DOCUMENT_ROOT'].'/settings/functions.php');
include($_SERVER['DOCUMENT_ROOT'].'/settings/config.php');
include($_SERVER['DOCUMENT_ROOT'].'/php/top-notification.php');
include($_SERVER['DOCUMENT_ROOT'].'/php/nav.php');
?>

<div class="container">
<?php
// Connect to database
$conn = getConnected("lucycypher");
// Don't execute upload script unless "upload" is clicked
if(isset($_POST['submit'])) {
// This is the directory where images will be saved
$target = $_SERVER['DOCUMENT_ROOT']."/gallery/";

// This gets all the other information from the form
$img_category = implode(',', $_POST['img_category']);
$img_name = $_POST['img_name'];

// Count the image files
if(count($_FILES['img_file']['tmp_name'])) {
// Loop through each file
foreach ($_FILES['img_file']['tmp_name'] as $img_file) {
// moves the image
if(move_uploaded_file($img_file, $target)) {
// if upload is a success query data into db
mysqli_query($conn, "INSERT INTO gallery_img (img_name, img_category, img_location) VALUES ('$img_name', '$img_category', '$img_file')") ;
echo '<div class="alert alert-success margin-top">Your imags were successfuly uploaded.</div>';
}
else {
echo '<div class="alert alert-danger margin-top">Sorry, there was a problem uploading your images.</div>';
}
}
}
}
?>

<form class="form-horizontal" method="POST" enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<fieldset>

<!-- Form Name -->
<legend>Upload Image</legend>

<!-- Select Multiple -->
<div class="form-group">
<label class="col-md-4 control-label" for="img_category">Category</label>
<div class="col-md-4">
<select id="img_category" name="img_category[]" class="form-control" multiple="multiple">
<option value="horror">Horror</option>
<option value="occult">Occult</option>
<option value="goth">Goth</option>
<option value="industrial">Industrial</option>
<option value="fashion">Fashion</option>
<option value="fetish">Fetish</option>
<option value="avante-garde">Avante-Garde</option>
<option value="cosplay">Cosplay</option>
<option value="nude">Nude</option>
</select>
</div>
</div>

<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="img_name">Name:</label>
<div class="col-md-4">
<input id="img_name" name="img_name" type="text" placeholder="Image Name" class="form-control input-md" required="">

</div>
</div>

<!-- File Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="img_file">Image</label>
<div class="col-md-4">
<input id="img_file" name="img_file[]" class="input-file" type="file" multiple>
</div>
</div>

<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit">Ready?</label>
<div class="col-md-4">
<button type="submit" name="submit" class="btn btn-primary">Upload</button>
</div>
</div>

</fieldset>
</form>


</div>

<?php include($_SERVER['DOCUMENT_ROOT'].'/php/footer.php'); ?>


And my database layout is:

ID mediumint(10) AUTO_INCREMENT
img_name varchar(50)
img_category varchar(200)
img_location blob
img_time timestamp on update CURRENT_TIMESTAMP


When I select multiple categories, select an image file, and enter text into the text box nothing gets added to the database and the image does not upload to the server.

I just simply get the
Sorry, there was a problem uploading your images.
error.

My
gallery
directory does have
775
permissions.

Answer

There are few flaws in your code, such as:

  • Look at this line here,

    if(move_uploaded_file($img_file, $target)) { ...
    

    $target should be a string specifying the destination file name, it should not be a directory path.

  • Since you're uploading images in the server, there's no point saving them in the database as well. Simply upload the images in the server and save the paths in the database. So, change the datatype of img_location column to VARCHAR.

Overall, your code should be like this:

if(isset($_POST['submit'])) { 
    $count = count($_FILES['img_file']['name']);

    for($i = 0; $i < $count; ++$i){
        $target = $_SERVER['DOCUMENT_ROOT']."/gallery/";
        $target = $target . basename($_FILES['img_file']['name'][$i]);

        $img_category = implode(",", $_POST['img_category']);
        $img_name = $_POST['img_name'];
        if(move_uploaded_file($_FILES['img_file']['tmp_name'][$i], $target)){
            mysqli_query($conn, "INSERT INTO gallery_img (img_name, img_category, img_location) VALUES ('$img_name', '$img_category', '$target')") ;
            echo '<div class="alert alert-success margin-top">Your imags were successfuly uploaded.</div>';
        }else {
            echo '<div class="alert alert-danger margin-top">Sorry, there was a problem uploading your images.</div>';
        }
    }
}