Multiple Upload File with Unusual Condition PHP - php

Question

I have this add button to select the file inside a upload form field:
$("#add_attachment").on('click', function() {
var no_attachment = parseInt($('#noa').val()) + 1;
$('#noa').val(no_attachment);
$("#tbody_attachment").append("<tr><td bgcolor='#d9d9d9' class='td-data_1'><div class='col-xs-12'><input type='number' class='form-control' name='noa_save[]' id='noa_save' placeholder='No' value='" + no_attachment + "' /></div></td><td bgcolor='#d9d9d9' class='td-data_1'><div class='col-xs-12'><input type='file' class='form-control' name='attachment_save[]' id='attachment_save' placeholder='Attachment'/></div></td><td bgcolor='#d9d9d9' class='td-data_1'><div align='center'><input type='button' name='attachment' id='remove_attachment' value='Remove' style='font-size:16px; width: 98%;'/></div></td></tr>");
});
$("#tbody_attachment").on('click', '#remove_attachment', function() {
$(this).closest('tr').remove();
var no_attachment = $('#noa').val();
$('#noa').val(parseInt(no_attachment) - 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="save_sop.php" enctype="multipart/form-data">
<div align="center">
<table class="table" id="t_attachment">
<thead>
<tr>
<th width="10%" bgcolor="#8eb4e3" class="td-data_1">
<div align="center">
<font size="3dp"><strong>No</strong></font>
</div>
</th>
<th bgcolor="#8eb4e3" class="td-data_1">
<div align="center">
<font size="3dp"><strong>Attachment</strong></font>
</div>
</th>
<th width="10%" bgcolor="#8eb4e3" class="td-data_1">
<div align="center">
<font size="3dp"><strong>Button</strong></font>
</div>
</th>
</tr>
</thead>
<tbody id="tbody_attachment">
<tr>
<td bgcolor="#d9d9d9" class="td-data_1">
<div class="col-xs-12">
<input type="number" class="form-control" name="noa" id="noa" placeholder="No" value="0" />
</div>
</td>
<td bgcolor="#d9d9d9" class="td-data_1">
<div class="col-xs-12">
<div align="justify">
<font size="3dp"><strong>Choose file after clicking Add button</strong></font>
</div>
</div>
</td>
<td bgcolor="#d9d9d9" class="td-data_1">
<div align="center"><input type="button" name="add_attachment" id="add_attachment" value="Add" style="font-size:16px; width: 98%;" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
You can run the code above to give an idea how's the form works.
And in the save_sop.php file, I have to upload the files that submitted from the previous form and also get the file name to be stored to MySQL database as a JSON array value.
Here's the code so far in the save_sop.php file:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
include 'con.php';
$total_attachment = mysqli_real_escape_string($con, $_POST['noa']);
$attachment["no"] = $_POST['noa_save'];
foreach($_FILES['attachment_save']['name'] as $filename) {
$imgFile = $filename;
$tmp_dir = $_FILES['attachment_save']['tmp_name'];
$imgSize = $_FILES['attachment_save']['size'];
$folder = 'sop/attachment/'; // upload directory
$imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION)); // get image extension
// valid image extensions
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
// rename uploading image
$img = rand(1000, 1000000) . "." . $imgExt; //generate the random file name
// allow valid image file formats
if (in_array($imgExt, $valid_extensions)) {
// Check file size '50MB'
if ($imgSize < 5000000) {
//move_uploaded_file($tmp_dir, $folder . $img);
} else {
$errMSG = "Sorry, your file is too large.";
}
} else {
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
echo "Generated File Name: " . $img . "<hr />";
$attachment['attachment'] = $img;
}
$attachment_save = json_encode($attachment, true);
echo $attachment_save;
}
?>
When the echo $attachment_save called, the result I get is below.
Generated File Name: 430609.jpg
<hr />
Generated File Name: 575033.jpg
<hr />
{"no":["1","2"],"attachment":"575033.jpg"}
Inside foreach loop, I called echo "Generated File Name:" . $img; I do get the result as expected, but in the attachment array, I only get one filename instead of two.
I need to get two file name value inside the attachment['attachment'] array. The result expected should be:
{"no":["1","2"],"attachment":["430609.jpg", "575033.jpg"]}
Can anybody help me with this? thanks in advance.
Regards.

Answer 1

the answer lies on
$attachment. Instead of $attachment['attachment'] = $img;
it should be
$attachment['attachment'][] = $img;
and it's working perfectly.