Drop Zone

The showDropZone function is a versatile utility designed to simplify the integration of multiple Dropzones in your custom pages forms. With this function, you can dynamically create and configure Dropzones for various file upload fields, each with its own set of properties, such as accepted file types, maximum file size, and user-friendly messages.

Structure

showDropZone($field_configs = [])

Parameters

The function accepts a single parameter which is an array that contains your fields configurations for drop zone areas to be displayed

1. Call the showDropZone function inside a form in your custom page or dashboard files.

2. The parameter of the function will be an array of field configurations. Each configuration should specify the following properties:

label_name: A label for the file upload field. field_name: A unique identifier for the field. dictDefaultMessage: The default message displayed in the Dropzone. dictRemoveFile: The text for the "Remove" link. maxFiles: The maximum number of files that can be uploaded. maxFilesize: The maximum file size in megabytes. acceptedFiles: The types of files that are accepted for upload (e.g., image/*, application/pdf). sizeClass: The css size class of each field eg: col-md-12

1. The showDropZone function will generate the necessary HTML and JavaScript to create Dropzones based on the provided field configurations. Each Dropzone is uniquely identified by its field_name.

2. Users can drag and drop files into the Dropzones or click to upload files. The Dropzones provide visual feedback, and you can configure them to accept only specific file types and sizes.

3. As files are uploaded, the function handles the success event, allowing you to customize the behavior when a file is uploaded successfully. It also handles the removed file event, ensuring that files can be removed from the Dropzone.

4. Behind the scenes, the function uses AJAX requests to interact with the server, making it easy to upload and manage files. Files are associated with the respective input fields, and file links are stored for further use.

5. Uploaded files can easily be managed using the inbuilt file manager tool.

Example Usage

<div class="card">
        <div class="card-body">
        <form action="" method="post">
            <div class="form-group">
                <?php
                echo showDropZone([
                    ["label_name" => "Profile Picture", "field_name" => "profile_picture", "dictDefaultMessage" => "Drag and drop files here or click to upload", "dictRemoveFile" => "Remove", "maxFiles" => "1", "maxFilesize" => "50", "acceptedFiles" => "image/*", "sizeClass" => "col-md-6"],
                    ["label_name" => "ID Front Picture", "field_name" => "id_front_pic", "dictDefaultMessage" => "Drag and drop files here or click to upload", "dictRemoveFile" => "Remove", "maxFiles" => "1", "maxFilesize" => "50", "acceptedFiles" => "image/*", "sizeClass" => "col-md-6"]
                ]);
                ?>
            </div>
            <br>
            <button name="savedp" type="submit" class="btn btn-primary">Submit</button>
        </form>
        </div>
        
    </div>

The above code is going to create 2 drop zones with fields named: profile_picture and id_front_pic

You can access the paths of the uploaded files via php . If multiple files are uploaded for each filed, the paths will be a comma separated string containing all the paths for the uploaded files.

Example To Access The Uploaded File Paths

<?php
//You can access your uploaded file paths as follows
if(isset($_POST['savedp'])){
    echo $_POST['profile_picture']."<br>";
    echo $_POST['id_front_pic'];
}
?>

The output of the above will be

C:\xampp\htdocs\northwind/alte_uploads/mpesa.png
C:\xampp\htdocs\northwind/alte_uploads/GFLOGOfr.png

I uploaded one file for each field and you can see the path of the files has been output as shown.

Drop Zone Output