I have a normal form with dropzone in it, all the values and files are uploaded to the server but when I examine it by printing $_FILES variable, all the uploaded files have same name & extension with the last file uploaded but have correct mime-types for each file. So when I upload multiple files with different filetypes the upload always get error for the file that have different extension with the last file.
Here's the sample of my code (I'm using CodeIgniter 3):
HTML
<form class="form form-horizontal dropzone" method="post" id="form-add-product" enctype="multipart/form-data">
<input type="text" class="form-control" name="type" id="type" required>
<input type="number" class="form-control" id="hour_meter" name="hour_meter" required>
<button class="btn btn-flat btn-success" id="btn_add_image" type="button"><i class="fa fa-plus"></i> Add Image</button>
<div id="dropzone-previews" style="min-height: 200px; border: 2px dotted #D2D6DE; padding: 20px">
</form>
JS
var formImage = new Dropzone("#form-add-product", {
url: baseURL + 'ProductNew/upload_product',
paramName: 'product-img',
uploadMultiple: true,
acceptedFiles: 'image/*',
maxFiles: 10,
parallelUploads: 10,
autoProcessQueue: false,
previewsContainer: '#dropzone-previews',
clickable: "#dropzone-previews,#btn_add_image",
addRemoveLinks: true,
maxFileSize: 50,
createImageThumbnails: true,
resizeHeight: 600,
dictRemoveFile: "<button class='btn btn-sm btn-flat btn-danger' style='margin-top: 5px'><i class='fa fa-trash'></i></button>",
init: function() {
var myForm = this;
var submitButton = document.getElementById('btn-add-submit');
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
myForm.processQueue();
});
});
PHP
$filesCount = count($_FILES['product-img']['name']);
$temp_files = $_FILES['product-img'];
$upload_path = 'assets/images/product/';
$config['upload_path'] = $upload_path;
$config['allowed_types'] = 'jpeg|jpg|png|gif|JPG|bmp';
$config['max_size'] = 1024 * 20;
if( ! file_exists($upload_path))
{
mkdir('assets/images/product/', 0777, true);
}
for($i = 0; $i < $filesCount; $i++)
{
$_FILES['product-img']['name'] = $temp_files['name'][$i];
$_FILES['product-img']['type'] = $temp_files['type'][$i];
$_FILES['product-img']['tmp_name'] = $temp_files['tmp_name'][$i];
$_FILES['product-img']['error'] = $temp_files['error'][$i];
$_FILES['product-img']['size'] = $temp_files['size'][$i];
$file_name = 'photos-'.($i+1);
$config['file_name'] = $file_name;
$this->upload->initialize($config);
if($this->upload->do_upload('product-img'))
{
$fileData = $this->upload->data();
$upload_data[] = array(
'photo_url' => $upload_path.$fileData['file_name']
);
}
else
{
$upload_data[] = array(
'error' => $this->upload->display_errors()
);
}
}
Here's the screenshot:
console.log(files)
print_r($_FILES)
The error given:
Array
(
[0] => Array
(
[error] =>
The filetype you are attempting to upload is not allowed.
)
[1] => Array
(
[photo_url] => assets/images/product/rodillo-vibratorio-de-doble-tambor-rd7hes_8567_9096.png
)
)
I really stuck find out what the problem is, I'm new in using Dropzone, been searching but haven't found the suitable answer.
EDIT: I FOUND THE SOLUTION I finally found out the solution, but I don't know whether it's a proper solution. I just set $config['allowed_type'] = '*' in the controller and the uploads run smoothly. Still figuring for another solution to do server-side validation. I won't delete this question because I think it would be useful for some beginners like me.