Step 1: Setup CodeIgniter 4 Project

Make sure you have a CodeIgniter 4 project set up and running on your server.

Step 2: Install Dropzone.js

Download the Dropzone.js library from its official website or include it via CDN in your project. You can include it in your HTML layout file.

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

Step 3: Create a Form with Dropzone

Create a form in your view file where users can upload files using Dropzone.js.

<div class="container">
      <div class="jumbotron">
    <h1>File Upload using Dropzone Example</h1> 
         <p>CodeIgniter 4.</p>
      </div>
      <div class="row">
            <div class="col-sm-12">
                <form action="<?php echo base_url('dropzone/upload'); ?>"
    class="dropzone"
    id="my-dropzone">
                </form>
            </div>
        </div>
   </div>

Step 4: Configure Dropzone.js

Initialize Dropzone.js with appropriate options. You can customize options like URL, max file size, accepted file types, etc.

<script type="text/javascript">
    Dropzone.options.myDropzone = {
        success: function(file, response) {
            var result = JSON.parse(response);
            if(result.status) {
                alert(result.message);
            } else {
                alert(result.message);
            }
        }
    };
</script>

Step 5: Create a View dropzone.php 

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

    <div class="container">
      <div class="jumbotron">
    <h1>File Upload using Dropzone Example</h1> 
         <p>CodeIgniter 4.</p>
      </div>
      <div class="row">
            <div class="col-sm-12">
                <form action="<?php echo base_url('dropzone/upload'); ?>"
    class="dropzone"
    id="my-dropzone">
                </form>
            </div>
        </div>
   </div>


<script type="text/javascript">
    Dropzone.options.myDropzone = {
        success: function(file, response) {
            var result = JSON.parse(response);
            if(result.status) {
                alert(result.message);
            } else {
                alert(result.message);
            }
        }
    };
</script>

Step 6: Create a Dropzone Controller

Create a controller in CodeIgniter to handle file uploads.

<?php
    namespace App\Controllers\dropzone;

    use App\Controllers\BaseController;

    class Dropzone extends BaseController {

        public function __construct() {
            $db                 = db_connect();
        }

        public function index() {
            $this->list();
        }

        public function list() {
            $data                       = [];
            $data ['content_title']     = "File Upload using Dropzone Example";
            $data ['main_content']      = "dropzone/dropzone";
            echo view('innerpages/template', $data);
        }

        public function upload() {
            $file   = $this->request->getFile('file');
            if($file->isValid()) {
                $path           = 'uploads/media/' . date('Y') . '/'. date('m') . '/';
                $file_data      = $this->uploadMediaFile($path, $file);
                if($file_data) {
                    $json = [
                    'message'   => "File has been uploaded successfully.",
                            'status'    => true,
                ];
                } else {
                    $json = [
                    'message'   => "There is an issue while uploading a file.",
                            'status'    => false,
                ];
                }
            } else {
                $json = [
                'message'   => "Please select a valid file",
                        'status'    => false,
            ];
            }
            echo json_encode($json);
        }

        function uploadMediaFile($path, $image) {
            if (!is_dir($path))
                mkdir($path, 0777, TRUE);
            if ($image->isValid() && ! $image->hasMoved()) {
                $newName = $image->getRandomName();
                $image->move('./'.$path);
                return $path.$image->getName();
            }
            return false;
        }
    }

Step 7: Configure Routes

Create a route in your app/Config/Routes.php file to map the upload controller method.

// dropzone
$routes->get('dropzone',            'dropzone\Dropzone::index');
$routes->post('dropzone/upload',    'dropzone\Dropzone::upload');

Step 8: Test Your Implementation

Run your CodeIgniter 4 application and test the file upload functionality with Dropzone.js.