Laravel 9: Dropzone showing [object object] and returns error (field is required)?

[DevMushref]

Starting off by saying I followed the documentation of Dropzone: Combining data with files

I created a custom button to process queued files instead of the default submit button of the form

This my Dropzone JS code block:

// Dropzone
let token = $('meta[name="csrf-token"]').attr('content');

var myDropzone = new Dropzone("#report_attachments", {
    url: storeReport, // Set the url for your upload script location
    paramName: 'file',
    maxFiles: 10,
    maxFilesize: 10, // MB
    addRemoveLinks: true,
    autoProcessQueue: false,
    autoQueue: true,
    acceptedFiles: '.png, .jpg, .jpeg, .webp, .gif',
    params: {
        _token: token,
    },
});

and this is the HTML:

<!--begin::Input group-->
<!--begin::Dropzone-->
<div class="dropzone" id="report_attachments">
    <!--begin::Message-->
    <div class="dz-message needsclick">
        <!--begin::Icon-->
        <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
        <!--end::Icon-->
        <!--begin::Info-->
        <div class="ms-4">
            <h3 class="dz-default fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
            <span class="fs-7 fw-semibold text-gray-400">Upload up to 10 files</span>
        </div>
        <!--end::Info-->
    </div>
</div>
<!--end::Dropzone-->
<button type="button" class="btn btn-small btn-primary mt-3" id="upload_dropzone">
   Process Files
 </button>
<!--end::Input group-->

Side note: I am using Form Validator with the form

• the column in database that stores the file directory is called 'attachment'
• Laravel cannot read the input named 'attachment' since it doesn't exist and is replaced by Dropzone.

Now let's get to the problem.

Every time I try to process queued files I get this error in laravel debugbar:

ir number is actually a field in the form and is filled! Actually all the required fields of the form are filled. Of course since it's laravel, I have a Request file which tells which field is required and what type of field is it:

public function rules()
    {
        return [
            'ir_number'              => 'required|integer',
            'type'                   => 'required|integer',
            'location'               => 'required|integer',
            'start_date_time'        => 'required|date',
            'end_date_time'          => 'required|date',
            'weather'                => 'nullable|string',
            'severity'               => 'required|string',
            'injury_source'          => 'required|string',
            'violator_full_name'     => 'required|string',
            'violator_id'            => 'required|integer',
            'violator_phone'         => 'required|integer',
            'violator_sex'           => 'required|string',
            'violator_age'           => 'nullable|string',
            'violator_nationality'   => 'required|string',
            'violator_type'          => 'required|string',
            'violator_injury_reason' => 'required|string',
            'violator_involvement'   => 'required|string',
            'vehicle_owner_name'     => 'nullable|string',
            'vehicle_owner_id'       => 'nullable|integer',
            'vehicle_make'           => 'nullable|string',
            'vehicle_model'          => 'nullable|string',
            'vehicle_color'          => 'nullable|string',
            'plate_number'           => 'nullable|string',
            'vehicle_type'           => 'nullable|string',
            'description'            => 'required|string',
            'cause'                  => 'required|string',
            'actions_taken'          => 'required|string',
            'details'                => 'required|string',
            'attachment'             => 'nullable|image|mimes:jpeg,jpg,png,gif,webp',
            'recommendation'         => 'required|string',
            'officer_name'           => 'required|string',
            'supervisor_name'        => 'required|string',
            'manager_name'           => 'required|string',
            'ccc_employee'           => 'required|string',
            'status'                 => 'nullable|string',
        ];
    }

I also have a dynamic action class which is responsible for file uploads across the entire application:

class UploadImageAction implements UploadImageContract
{
    public function handle(Request $request, $imageProperty, $image, $imageDir)
    {
        if ($request->hasFile($imageProperty)) {
            // Handle uploading lf_image
            if (!is_null($image) && Storage::exists($image)) {
                // Throw exceptions here
                Storage::delete($image);
            }
            // Throw exceptions here
            return $request->file($imageProperty)->store($imageDir);
        }
    }
}

I resolve() that action in the Service class like so:

public function handleAttachments($request, $report)
    {
        // Handle Attachments
        $uploadImageAction = resolve(UploadImageAction::class);

        // Handle attachment action
        if($request->file('attachment')) {
            $report->attachment = $uploadImageAction->handle($request, 'attachment', $report->attachment, 'reports');
        }

        return $report;
    }

then use handleAttachments() method in the storeReport():

public function storeReport(Request $request)
    {
        $report = new Report();
        $report->fill($request->validated());
        $report = $this->handleAttachments($request, $report);

        $report->save();

        if(!$report) {
            throw new ReportException('Something went wrong with the request.' . $report);
        }

        return $report;
    }

So basically I am combining the files and data to be uploaded within a single validated() request. This practice is working perfectly across all other pages, but since I added Dropzone, I got the error you see above in the debugbar.

What happens when you submit the form?
I tried making the submit button process the queues and submit the form, but then I get validation error saying attachment field is required.

What's going on here exatly?

Your support is highly appreciated

[1stwebdesigns]

In your validation request the field name is attachment but in your Dropzone configuration the field name is file

Change your Dropzone config:

var myDropzone = new Dropzone("#report_attachments", {
    ...
    paramName: 'attachment',
    ...
});