get data with attr from modal window

I have a modal window for uploading files, it is used in this piece of code

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

The window itself is a little lower on the page

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    ....
</div>

To open it and upload files, I use javascript

I have shortened the code a little everywhere so that there is no confusion, but if something is missing, then I will add

(function( $ ){
    $.dispatcherFiles = {
        $filesDropzone: null,
        $parallelUploads: 100,
        $maxFiles: 10,
        $modalId: '#modal-upload',
        $files: [],

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            openUploadFilesModal: function (e) {
                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');          

                $(this.$modalId + ' #filesDropzone').addClass('dropzone');

                this.$filesDropzone = new Dropzone(that.$modalId + ' .dropzone', {
                    url: action_url,
                    uploadMultiple: true,
                    parallelUploads: that.$parallelUploads,
                    maxFiles: that.$maxFiles,
                });
            },

            hideUploadFilesModal: function (e) {
                this.$filesDropzone.destroy();
            },
        },

        events: function(){
            this.$body.on('shown.bs.modal', this.$modalId, this.functions.openUploadFilesModal.bind(this));
            this.$body.on('hidden.bs.modal', this.$modalId, this.functions.hideUploadFilesModal.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

So, in this example, the main problem I have is to get data-action_url from the html page

I am trying to do it with these lines

let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
let action_url = $(dropzoneParamEl).attr('data-action_url'); 

But in the end my variable is undefined, even though the previous variable dropzoneParamEl is defined and I get the DOM of that element

And this is all just because my function is triggered when the window is opened shown.bs.modal

If I receive data via click, then I can get the attribute I need

But as far as I understand, I can’t use the click modal for opening, because then nothing will work at all

How can I get the value of data-action_url when opening the modal in this case? I’ll clarify right away that I can have several such upload buttons, and I need the value of exactly the element that was clicked

=====================================

I tried to make an approximate snippet, but unfortunately nothing opens ..

(function($){
    let $modalId = '#modal-upload';
    let $filesDropzone = null;
    let $parallelUploads = 100;
    let $maxFiles = 10;
    let $files = [];
        
    $.dispatcherFiles = {

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            openUploadFilesModal: function (e) {
                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');
                
                console.log(dropzoneParamEl);
                console.log(action_url);

                $($modalId + ' #filesDropzone').addClass('dropzone');

                $filesDropzone = new Dropzone($modalId + ' .dropzone', {
                    url: action_url,
                    uploadMultiple: true,
                    parallelUploads: $parallelUploads,
                    maxFiles: $maxFiles,
                });
                
                $filesDropzone.on('success', function(file, response) {
                    $($modalId).modal('hide');
                });
            },

            hideUploadFilesModal: function (e) {
                $filesDropzone.destroy();
            },
        },

        events: function(){
            this.$body.on('shown.bs.modal', $modalId, this.functions.openUploadFilesModal.bind(this));
            this.$body.on('hidden.bs.modal', $modalId, this.functions.hideUploadFilesModal.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

.field {
  margin: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Upload files
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <div id="filesDropzone"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

from get data with attr from modal window