How to Save multiple images on database using PHP Script

Question

On my custom CMS,

I am successfully able to save all the values from the admin form into the database.

All of these have a single value, but what about multiple element?

How can I save the input file with more than one image ?

Here is my full code of the add post page:

<?php
if(isset($_POST['submit'])) {
    $title_bg = $_POST['title_bg'];
    $title_en = $_POST['title_en']; 
    $body_bg = $_POST['body_bg'];
    $body_en = $_POST['body_en'];   
    $image = $_FILES['image']['name'];
    $image_tmp = $_FILES['image']['tmp_name'];  

    move_uploaded_file($image_tmp, '../uploads/' . $image);

    $status = $_POST['status'];


    $query = "INSERT INTO posts(title_bg, title_en, body_bg, body_en, image, status, created) ";
    $query .= "VALUES('$title_bg', '$title_en', '$body_bg', '$body_en', '$image', '$status', now())";

    $create_post = mysqli_query($connection, $query); 

    header("Location: posts.php");  
} 
?>

<form action="" method="post" enctype="multipart/form-data">
    <div class="form-item">
        <label for="title_bg">Post title BG</label>
        <input type="text" name="title_bg">
    </div>

    <div class="form-item">
        <label for="title_en">Post title EN</label>
        <input type="text" name="title_en">
    </div>  

    <div class="form-item">
        <label for="body_bg">Post body BG</label>
        <textarea id="editor" name="body_bg" rows="10" cols="30"></textarea>
    </div>  

    <div class="form-item">
        <label for="body_en">Post body EN</label>
        <textarea id="editor2" name="body_en" rows="10" cols="30"></textarea>
    </div>  

    <div class="form-item">
        <label for="image">Image</label>
        <input type="file" name="image">
    </div>

    <div class="form-item">
        <label for="status">Post status</label>
        <select name="status">
            <option value="published">published</option>
            <option value="draft">draft</option>
        </select>
    </div>

    <div class="form-item">
        <input type="submit" class="form-submit" name="submit" value="Submit">
    </div>  
</form>

Right now the image value is saving into the database image field like this: sample-1.jpg.

As far as I know, in HTML multiple element has the attribute multiple and using array this line should be like this:

<input type="file" name="image[]" multiple>

but how do I set an array element $image and save the multiple values into one field, so when I upload let's say three images, the saved values in the database image field should be like this: sample-1.jpg, sample-2.jpg, sample-3.jpg

Answer 1

I would suggest you to create another table for the uploaded images and map it with the foreign key of the 1st table.

For Ex : Suppose you have one form to add a property detail. Create a table for adding the property detail, with the multiple image upload feature. You will have to store the path of the image in this table. Create another table with the Image Id and the Primary Key (of first table) and map them. So that the 2nd table will have multiple rows for the primary key of the 1st table. This will help you in fetching the images easily if needed.

1. Property table

contains all fields and image upload path field.

2. Image_Prop table

contains the img id (unique) and the foreign key (of Property table) for mapping along with other details.