I have a form in codeigniter 3 application. The dropzone is implemented on the form, the problem is when I submit the form the dropzone picture stored but it ignore my other simple image field. Please give me any idea and solution to sort this problem. I dont know what I am doing wrong. I have tried multiple ways for example dz-enable but its not working , I want to submit bith simple file field and dropzone to the database and into the path directory, But it ignore the simple image field and stored only dropzone image.
My html form code:
<form id="pro-form2" method="post" onsubmit="return validate();"
class="project-form dropzone dropzone1 dz-clickable"
action="<?php echo base_url(); ?>project/add_project<?php if (isset($project_data)) {echo "/" . $project_data['id'];} ?>"
enctype="multipart/form-data">
<!-- owner picture -->
<div class="col-md-3" id="owner_picture">
<div class="form-group">
<label>Owner Picture </label>
<input class="form-control" type="file" value="" placeholder=""
name="owner_picture" />
</div>
</div>
<!---dropzone attachmnet-->
<div class="row">
<div class="col-md-12">
<h3 class="underline-heading"> Attachments </h3>
<div class="row">
<div class="col-md-12">
<div class="">
<div class="row">
<div class="col-md-12">
<div class="draghere dz-message">
<h4 style="text-align:center;"> Drag & drop files here
OR Click here to browse </h4>
</div>
</div>
</div>
<?php if (isset($project_attachments) && count($project_attachments) == 0) { ?>
<div class="row">
<div class="col-md-12">
<div class="dropzone-previews2"></div>
</div>
</div>
<?php } elseif (isset($project_attachments) && count($project_attachments) > 0) { ?>
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>File Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php for ($x = 0; $x < count($project_attachments); $x++) {
$t = explode("_|_", $project_attachments[$x]['file']);
$file_name = $t[1];
?>
<tr>
<td><?php echo $x + 1; ?></td>
<td><a
href="<?php echo base_url() . "uploaded_files/project/" . $project_attachments[$x]['file']; ?>"><?php echo $file_name; ?></a>
</td>
<td><a onclick="return confirm('Are you sure to remove attachment?')"
href="<?php echo base_url() .
"project/remove_attachment/" .
$proj_id .
"/" .
$project_attachments[$x]['id']; ?>"
class="remove_attachment btn btn-danger"><i
class="fa fa-minus"></i> Remove </a>
</td>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="dropzone-previews2"></div>
</div>
</div>
<?php } else { ?>
<div class="row">
<div class="col-md-12">
<div class="dropzone-previews2"></div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
<!---End--->
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn pull-right btn-default">Save</button>
</div>
</div>
</div>
</form>
My js code for dropzone
Dropzone.options.proForm2 = { // The camelized version of the ID of the form element
// The configuration we've talked about above
accept: function(file, done) {
var allowed_expensions = ["gif", "jpg", "png", "jpeg", "doc", "docx", "xls", "xlsx", "pdf", "ppt",
"pptx"
];
var filename = file.name;
var file_type = filename.split('.').pop();
file_type = file_type.toLowerCase();
console.log(filename);
console.log(file_type);
if (allowed_expensions.indexOf(file_type) > -1) {
done();
} else {
done("Error! Files of this type are not accepted");
}
},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
dictRemoveFile: '',
dictCancelUpload: '',
previewsContainer: '.dropzone-previews2',
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
if (myDropzone.files.length > 0) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
}
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location = '<?php echo base_url(); ?>project/go_to_step2<?php if (isset($proj_id) && $proj_id != null) {
echo "/$proj_id";
} ?>';
// myDropzone.removeAllFiles();
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
alert('error');
console.log(response);
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}