I created a repeater form together with dropzone JS. Now the repeater is fine, able to POST to DB. The problem now is the Image Upload part. So since the problem is the Image upload part, I created a test form where I click the "Add" button and the dropzone will just duplicate itself inside. When I upload, it's successful but it only uploads the last dropzone I uploaded in. I'm using PHP Codeigniter Framework for this.
The question is, how can I like split those uploads, for example, Dropzone1 uploads to folder 123, Dropzone2 uploads to folder 987, etc.. in 1 single POST form
My HTML and JS Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Test Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Test Image Form</h2>
<button type="button" class="btn btn-primary" id="addTest">Add</button>
<form action="admin/testInsert" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter email" name="name[]">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd[]">
</div>
<div class="form-group">
<label for="desc">Description:</label>
<input type="text" class="form-control" id="desc" placeholder="Enter password" name="desc[]">
</div>
<div id="testDiv">
<div class="mb-3">
<div class="form-group">
<label class="col-lg-3 col-form-label">Images</label>
<div class="col-lg-6">
<div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_1">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
<span class="dropzone-msg-desc">Upload up to 6 files</span>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" id="subBtn" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var i= 1;
$('#addTest').click(function(){
i++;
//$('#testDiv').append('</br><div id="row'+i+'"><h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Product Detail Media:</h3><div class="mb-3"><div class="form-group"><div class="col-lg-6"><div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_'+i+'"><div class="dropzone-msg dz-message needsclick"><h3 class="dropzone-msg-title">Drop files here or click to upload.</h3><span class="dropzone-msg-desc">Upload up to 6 files</span></div></div></div></div></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button> </div> ');
$('#testDiv').append('<div class="form-group"><label for="email">Email:</label><input type="text" class="form-control" id="email" placeholder="Enter email" name="name[]"></div>');
$('#testDiv').append('<div class="form-group"><label for="pwd">Description:</label><textarea type="text" class="form-control" id="desc" placeholder="Enter desc" name="desc[]" ></textarea></div>');
$('#testDiv').append('<div class="form-group"><label for="pwd">Password:</label><input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd[]"></div>');
$('#testDiv').append('<div class="mb-3"><div class="form-group"><label class="col-lg-3 col-form-label">Images</label><div class="col-lg-6"><div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_'+i+'"><div class="dropzone-msg dz-message needsclick"><h3 class="dropzone-msg-title">Drop files here or click to upload.</h3><span class="dropzone-msg-desc">Upload up to 6 files</span></div></div></div></div></div>');
console.log(i);
var myDropzone = new Dropzone('#kt_dropzone_'+i+'',{
//url: "admin/upload_file", // Set the url for your upload script location
url: "admin/testUpload",
paramName: "file", // The name that will be used to transfer the file
uploadMultiple: true,
maxFiles: 6,
maxFilesize: 2, // MB
parallelUploads: 10,
addRemoveLinks: true,
autoProcessQueue: false,
acceptedFiles: "image/*",
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
} else {
done();
}
}
});
$('#subBtn').on('click', function () {
myDropzone.processQueue();
});
});
});
</script>Controller Code
public function testUpload(){
$this->Admin_model->test();
}
Code for upload in Model
function test(){
$prodDetID = $this->session->tempdata('item');
$this->load->library('ftp');
$config['hostname'] = '127.0.0.1';
$config['username'] = 'root';
$config['password'] = '';
$config['debug'] = TRUE;
$this->ftp->connect($config);
foreach($prodDetID as $val){
if(!is_dir('./upload/assets/ProductDetail/'.$val))
{
mkdir('./upload/assets/ProductDetail/'.$val,077,TRUE);
}
$num_files = count($_FILES['file']['name']);
for($i = 0; $i < $num_files; $i++){
$img = pathinfo($_FILES['file']['name'][$i], PATHINFO_EXTENSION);
$imgName = $val."".date('YmdHis').'.'.$img;
$test = $this->ftp->upload($_FILES['file']['tmp_name'][$i], "upload/assets/ProductDetail/$val/".$_FILES['file']['name'][$i], 'auto');
}
}
$this->session->unset_tempdata('item');
}
The image below is the output for the View
When submit button is clicked, the based insert id is 29 and 30. Folder 29 and 30 is created. As seen in the picture below, both folders it has the same uploaded image.
Any help/advice would be appreciated. Thanks in advance :)
