Dropzone.js library multiple files uploaded to server issue

Question

I have a Dropzone instance set up to allow users to upload multiple images for a place. The files are being sent to the server using AJAX requests. I have implemented event handlers such as sendingmultiple, successmultiple, errormultiple, and complete to manage the file uploading process. Additionally, I have included a sortable functionality to allow users to rearrange the uploaded images.

Below is Js code:

`$(document).ready(function () {
    Dropzone.autoDiscover = false;
    let myDropzone = new Dropzone("div#bestPlaceImgDrop", {
        paramName: "files",
        addRemoveLinks: true,
        uploadMultiple: true,
        autoProcessQueue: false,
        parallelUploads: 50,
        maxFilesize: 5,
        acceptedFiles: ".webp, .jpeg, .jpg",
        url: siteUrl + middlewareType + "/places/upload-place-images",
        clickable: true
    });

    myDropzone.on("sendingmultiple", function (files, xhr, formData) {
        xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
        let filenames = [];
        files.forEach(function (file) {
            filenames.push(file.name);
        });
        const placeid = $('#placeid').val();
        formData.append('filenames', filenames);
        formData.append('placeid', placeid);
        $('#preloader').show();
    });

    myDropzone.on("successmultiple", function (files, response) {
        if (response.success) {
            Swal.fire("Success", 'Image(s) Uploaded Successfully!', "success").then(function () {
                window.location.reload();
            });
        } else {
            showAlert('error', 'Image(s) Uploading failed');
        }
    });

    myDropzone.on("errormultiple", function (files, errorMessage) {
        showAlert('error', 'Image(s) Uploading failed');
    });

    myDropzone.on("complete", function (file) {
        $('#preloader').hide();
        myDropzone.removeFile(file);
    });

    $("#addPlaceImgsBtn").on("click", function () {
        console.log("-- upload btn click --");
        myDropzone.processQueue();
    });

    $(function () {
        $("#bestPlaceImgDrop").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '#bestPlaceImgDrop',
            distance: 20,
            tolerance: 'pointer',
            stop: function (event, ui) {
                myDropzone.sortable('update');
            }
        });

        $("#bestPlaceImgDrop").disableSelection();
    });
});

`

However, I am encountering a problem where duplicate files are being uploaded to the server. I suspect that the issue may be related to how I handle the file names during the uploading process. I would appreciate any insights or suggestions on how to resolve this issue and ensure that only unique files are uploaded.

Any help or guidance on improving the code structure or handling the file uploading process efficiently would be greatly appreciated. Thank you in advance for your assistance.

I have tried all possible solutions that I found during R&D on internet, but failed no success.