Dropzone is uploading all files to server for each file drop/selection

[timtinan37]

I'm trying to integrate dropzone in a laravel 8 application. Whenever I drop any image in dropzone, it is uploading all the files of dropzone, not skipping already uploaded file. For example, if I drop "image-1.jpg" in dropzone, it uploads the file instantly (which is desired). But after that, if I select "image-2.jpg", it re-uploads "image-1.jpg" first (which isn't desired, I want to prevent this re-upload), then it uploads "image-2.jpg". Also, I want to prevent folder(containing multiple image) upload and have tried to prevent it by setting maxFiles to 1, but it's not preventing it.

Javascript

    var refType = $('#reference-type');
    electronic = $('.electronic'),
    image = $('.image'), 
    description = $('.description'),
    url = "{{ route('user.bank.files') }}",
    submitRef = $('#submit-ref');
    
    Dropzone.autoDiscover=false;
    var imageDropzone;
    var config = { 
        url: url, headers: {'X-CSRF-TOKEN':'{{ csrf_token() }}'},
        uploadMultiple: false,
        maxFiles: 1,
        maxFilesize: 1,
        paramName: 'reference_image',
        addRemoveLinks: true,
        acceptedFiles: 'image/jpeg, image/png , image/jpg, image/svg',
        init: function() {
            imageDropzone = this;
        },
        removedfile: function (file) {
            if (file.accepted) {
                data = {
                    action: 'delete',
                    tnx_id: "{{ the_tnx(data_get($order, 'tnx')) }}"
                };
                NioApp.Form.toPost(url, data);
            }
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        },
        sending: function(data, xhr, formData) {
            formData.append('action', 'store');
            formData.append('tnx_id', "{{ the_tnx(data_get($order, 'tnx')) }}");
        },
        addedfiles: function () {
            if (this.files.length > 1) {
                this.removeFile(this.files[1]);
                NioApp.Toast("{{ __('You can upload only one :file.', ['file' => 'image']) }}", 'warning');
            }
        },
        error: function(file, errorMessage) {
            $.each(imageDropzone.files, function(i, file) {
                file.status = Dropzone.QUEUED
            });
        }
    };

    $("#reference-image").dropzone({...config});