Hello Stack Overflow community!
I'm currently working on a CodeIgniter 4 project and I'm trying to integrate Dropzone file into my main form. The specific behavior I want to achieve is that when my main form is submitted, the files in Dropzone should be appended to the main form data with the parameter name "image".
Here's what I have currently:
<link href="/vendors/dropzone/dropzone.min.css" rel="stylesheet">
<script src="/vendors/dropzone/dropzone.min.js"></script>
<form class="form" enctype="multipart/form-data">
<?php echo csrf_field(); ?>
<div class="col-12">
<div class="ajax-response my-3"></div>
</div>
<div class="row g-0">
<div class="col-lg-8 pe-lg-2">
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Basic information</h6>
</div>
<div class="card-body">
<div class="row gx-2">
<div class="col-12 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'name', 'label' => 'Product name', 'value' => $product->name]) ?>
</div>
<div class="col-6 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'barcode', 'label' => 'Barcode', 'value' => $product->barcode]) ?>
</div>
<div class="col-6 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'product_code', 'label' => 'SKU', 'value' => $product->product_code]) ?>
</div>
<div class="col-4 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'unit', 'label' => 'Unit', 'value' => $product->unit]) ?>
</div>
<div class="col-4 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'units_per_case', 'label' => 'Units per case', 'value' => '']) ?>
</div>
<div class="col-4 mb-3">
<?= view_cell('Inputs/TextCell', ['name' => 'volume', 'label' => 'Volume', 'value' => $product->volume]) ?>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Add images</h6>
</div>
<div class="card-body">
<!-- dropzone is here--> <?= view_cell('Inputs/FileCell', ['name' => 'image', 'id' => 'image', 'label' => 'image']) ?>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Details</h6>
</div>
<div class="card-body">
<div class="row gx-2">
<div class="col-12 mb-3"><label class="form-label" for="product-description">Product description:</label>
<div class="form-floating"><textarea name="description" class="form-control" id="floatingTextarea2" placeholder="Leave a comment here" style="height: 100px"></textarea></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 ps-lg-2">
<div class="sticky-sidebar">
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Type</h6>
</div>
<div class="card-body">
<div class="row gx-2">
<div class="col-12 mb-3">
<?= view_cell('Inputs/SelectCell', ['name' => 'category_id', 'label' => 'Category', 'multiple' => true, 'notNullable' => true, 'options' => $category, 'value' => [$product->category_id]]) ?>
</div>
<div class="col-12">
<?= view_cell('Inputs/SelectCell', ['name' => 'client_id', 'label' => 'Customer', 'multiple' => true, 'options' => $clients, 'value' => [$product->client_id]]) ?>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Pricing</h6>
</div>
<div class="card-body">
<div class="row gx-2">
<?= view_cell('Inputs/TextCell', ['name' => 'price', 'label' => 'Price', 'value' => $product->price]) ?>
<?= view_cell('Inputs/TextCell', ['name' => 'tax', 'label' => 'Tax', 'value' => '']) ?>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Active status</h6>
</div>
<div class="card-body">
<?= view_cell('Inputs/CheckboxCell', ['name' => 'active', 'label' => 'This product is not currently active']) ?>
</div>
</div>
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="mb-0">Checklist</h6>
</div>
<div class="card-body">
<?= view_cell('Inputs/CheckboxCell', ['name' => 'geo_lock_active', 'label' => 'Hero SKU']) ?>
<?= view_cell('Inputs/CheckboxCell', ['name' => 'shock', 'label' => 'This product is key (Must Sell Item)']) ?>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<div class="row justify-content-between align-items-center">
<div class="col-md">
<h5 class="mb-2 mb-md-0">You're almost done!</h5>
</div>
<div class="col-auto">
<?= view_cell('Inputs/FormButtonsCell', ['controller' => \App\Controllers\ProductController::class, 'model' => $product]) ?>
</div>
</div>
</div>
</div>
</div>
</form>
dropzone is presented inside FileCell:
<div class="dropzone dropzone-multiple p-0 dz-clickable"
name="image" id="myAwesomeDropzone" data-dropzone="data-
dropzone" action="#!" >
<div class="dz-message" data-dz-message="data-dz-message">
<img class="me-2" src="../../../assets/img/icons/cloud-
upload.svg" width="25" alt="">
<span class="d-none d-lg-inline">Drag your image here<br>or,
</span>
<span class="btn btn-link p-0 fs--1">Browse</span>
</div>
</div>
Javascript is in the bottom of the file:
document.addEventListener("DOMContentLoaded", function ()
{
Dropzone.autoDiscover = false;
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
withCredentials: true,
autoQueue: false,
};
};
However, when I submit my form, the images aren't being appended.
To provide some more context: My form submission is handled through a view cell named "FormButtonsCell".
Has anyone encountered this issue or can provide some guidance on how to achieve this? I'd greatly appreciate any pointers or examples!
I believe this is a straightforward issue for someone well-versed in JavaScript, but I could use a bit of help. An example or a pointer on how to tackle this would be invaluable.
Thanks in advance for the help!