I'm trying to upload zip file using drop zone. Uploading just fine with small size zip files. However, for zip more than 5MB cannot upload. Somehow the uploading process stuck at 100% and remain there until page refresh manually.
Note: Already increased max file size and upload limit of the server but no luck!
You can see here:
after dragging the file, at 100% it getting stuck and error come up in the console.
Error:
HTML
<?php $exts = str_replace('"', '', $this->product_settings->digital_allowed_file_extensions);
$exts = str_replace(',', ", ", $exts);
$exts = strtoupper($exts); ?>
<div class="form-box">
<div class="form-box-head">
<h4 class="title">
<?php echo trans('digital_files'); ?>
<small><?php echo trans("allowed_file_extensions"); ?>: <strong class="font-500"><?php echo $exts; ?></strong></small>
</h4>
</div>
<div class="form-box-body">
<div class="row">
<div class="col-sm-12">
<div id="digital_files_upload_result" class="row-custom">
<?php $this->load->view('dashboard/product/_digital_files_upload_response'); ?>
</div>
<div class="error-message error-message-file-upload"></div>
</div>
</div>
</div>
</div>
<!-- File item template -->
<script type="text/html" id="files-template-digital-files">
<li class="media">
<div class="media-body">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</script>
JS: library that I'm using here: https://github.com/danielm/uploader
<script>
$('#drag-and-drop-zone-digital-files').dmUploader({
url: '<?php echo base_url(); ?>upload-digital-files-post',
queue: true,
extFilter: [<?php echo $this->product_settings->digital_allowed_file_extensions;?>],
multiple: false,
extraData: function (id) {
return {
"product_id": <?php echo $product->id; ?>,
"<?php echo $this->security->get_csrf_token_name(); ?>": $.cookie(csfr_cookie_name)
};
},
onDragEnter: function () {
this.addClass('active');
},
onDragLeave: function () {
this.removeClass('active');
},
onNewFile: function (id, file) {
ui_multi_add_file(id, file, "digital-files");
},
onBeforeUpload: function (id) {
ui_multi_update_file_progress(id, 0, '', true);
ui_multi_update_file_status(id, 'uploading', 'Uploading...');
},
onUploadProgress: function (id, percent) {
ui_multi_update_file_progress(id, percent);
},
onUploadSuccess: function (id, data) {
var obj = JSON.parse(data);
if (obj.result == 1) {
document.getElementById("digital_files_upload_result").innerHTML = obj.html_content;
}
},
onFileExtError: function (file) {
$(".error-message-file-upload").html("<?php echo trans('invalid_file_type'); ?>");
setTimeout(function () {
$(".error-message-file-upload").empty();
}, 4000);
},
});
$(document).ajaxStop(function () {
$('#drag-and-drop-zone-digital-files').dmUploader({
url: '<?php echo base_url(); ?>upload-digital-files-post',
queue: true,
extFilter: [<?php echo $this->product_settings->digital_allowed_file_extensions;?>],
multiple: false,
extraData: function (id) {
return {
"product_id": <?php echo $product->id; ?>,
"<?php echo $this->security->get_csrf_token_name(); ?>": $.cookie(csfr_cookie_name)
};
},
onDragEnter: function () {
this.addClass('active');
},
onDragLeave: function () {
this.removeClass('active');
},
onNewFile: function (id, file) {
ui_multi_add_file(id, file, "digital-files");
},
onBeforeUpload: function (id) {
ui_multi_update_file_progress(id, 0, '', true);
ui_multi_update_file_status(id, 'uploading', 'Uploading...');
},
onUploadProgress: function (id, percent) {
ui_multi_update_file_progress(id, percent);
},
onUploadSuccess: function (id, data) {
var obj = JSON.parse(data);
if (obj.result == 1) {
document.getElementById("digital_files_upload_result").innerHTML = obj.html_content;
}
},
onFileExtError: function (file) {
$(".error-message-file-upload").html("<?php echo trans('invalid_file_type'); ?>");
setTimeout(function () {
$(".error-message-file-upload").empty();
}, 4000);
},
});
});
</script>
PHP
//upload digital files
public function upload_digital_files($product_id)
{
if (isset($_FILES['file'])) {
if (empty($_FILES['file']['name'])) {
exit();
}
}
$product = $this->product_model->get_product_by_id($product_id);
if (!empty($product)) {
$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$file_name = str_slug($this->general_settings->application_name) . "-digital-file-" . $product->id . uniqid() . "." . $ext;
$this->load->model('upload_model');
if ($this->upload_model->digital_file_upload('file', $file_name)) {
$data = array(
'product_id' => $product_id,
'user_id' => user()->id,
'file_name' => $file_name,
'storage' => 'local',
'created_at' => date('Y-m-d H:i:s')
);
@$this->db->close();
@$this->db->initialize();
$this->db->insert('digital_files', $data);
}
}
}
//digital file upload
public function digital_file_upload($input_name, $file_name)
{
$config['upload_path'] = './uploads/digital-files/';
$config['allowed_types'] = '*';
$config['file_name'] = $file_name;
$this->load->library('upload', $config);
if ($this->upload->do_upload($input_name)) {
$data = array('upload_data' => $this->upload->data());
if (isset($data['upload_data']['full_path'])) {
return true;
}
return null;
} else {
return null;
}
}
source https://stackoverflow.com/questions/67862502/cannot-upload-big-zip-files-using-drop-zone-in-codeigniter
No comments:
Post a Comment