Dynamically adding input file object with form - php

Question

I designed a form in form.php with a file input. When I press +input button, a new file input object should be generated and save them to my mysql server.
My code here,
form.php
<div id="enterReplyReferenceList">
<div class="enterReplyRefInputContainer">
<div class="enterReplyRefInput">
<form action="submit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $userID; ?>" name="userID">
<input type="submit" value="SEND"/>
<input type="file" name="enterRefFile[]" multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
</form>
</div>
</div>
</div>
<button onclick="appendRef()">+input</button>
form.js
function appendRef(){
var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
var inputclassChild = document.createElement('div');
inputclassChild.innerHTML = inputclass.innerHTML;
var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
newClass.className = "enterReplyRefInputContainer";
submit.php
for($i=0; $i<count($_FILES['enterRefFile']['name']); $i++) {
$tmpFilePath = $_FILES['enterRefFile']['tmp_name'][$i];
if ($tmpFilePath != ""){
$fileData = addslashes(file_get_contents($_FILES['enterRefFile']['tmp_name'][$i]));
$fileName = addslashes($_FILES['enterRefFile']['name'][$i]);
$fileType = $_FILES['enterRefFile']['type'][$i];
if($fileData != null){
if($fileType == "application/pdf" || $fileType == "image/png" || $fileType == "image/jpeg" || $fileType == "image/jpg"){
mysql_query("INSERT INTO attachment (attachData, dataType, attachName, userID) VALUES('$fileData','$fileType','$fileName', '$userID')");
}
}
}
}
When I pressed the +input button, a new input file object is generated with the same look with the original and I can select the files. However, only a single file can be uploaded to my mysql db after I clicked the submit button. Can somebody tell me why the new file input cannot be uploaded? Is the new objects will not be sent?

Answer 1

The problem is that your input button is cloning your whole div, which has the form, so when you click "Submit" you're uploading one form with one file element. Here's an updated version (all in one file, you can separate to your liking):
<button onclick="appendRef()">+input</button><br><hr>
<form action="submit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $userID; ?>" name="userID">
<div id="enterReplyReferenceList">
<div class="enterReplyRefInputContainer">
<div class="enterReplyRefInput">
<input type="file" name="enterRefFile[]" multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
</div>
</div>
</div>
<hr>
<input type="submit" value="SEND"/>
</form>
<script>
function appendRef(){
var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
var inputclassChild = document.createElement('div');
inputclassChild.innerHTML = inputclass.innerHTML;
var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
newClass.className = "enterReplyRefInputContainer";
}
</script>
Button click is outside of the form so you don't do a submit action on it (unless you want to use a blocking action like jQuery preventDefault(), and you only need one submit for the whole form.