Estoy tratando de integrar dropzone en una aplicación laravel 8. Cada vez que coloco una imagen en dropzone, está cargando todos los archivos de dropzone, sin omitir el archivo ya cargado. Por ejemplo, si coloco "image-1.jpg" en dropzone, carga el archivo instantáneamente (lo cual es deseable). Pero después de eso, si selecciono "imagen-2.jpg", vuelve a cargar "imagen-1.jpg" primero (lo cual no es deseado, quiero evitar que se vuelva a cargar), luego carga "imagen- 2.jpg". Además, quiero evitar la carga de carpetas (que contienen varias imágenes) y he intentado evitarlo configurando maxFiles en 1, pero no lo impide.

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});