Unisharp/Filemanager in laravel 10 javascript is not updating the input field

I’m using laravel to run my application and in it, I’m using the unisharp/filemanager to upload files and choose for blog post submittions and avatar changes and all that sort of thing. It works perfectly in my summernote implementation but now I’ve being struggling to implement it to update the user’s profile avatar.

The Javascript I use to open the filemanager window is:

(function( $ ){

    $.fn.filemanager = function(type) {
        this.on('click', function(e) {
            var route_prefix = '/filemanager';
            window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
                var file_path = items.map(function (item) {
                    const image = item.url;
                    return item.url;
                });
        
                $("#preview-container").css("background-image", "url(" + file_path + ")");
                $('#avatar-path').value = file_path;
                $('#file-input').value = file_path;
            };
            return false;
        });
    }
    
})(jQuery);

$('#file-input').filemanager('image');

/* I've also tried the following way to use the filemanager and it had the same results as the previous method
$('#invoke-file-input').filemanager('image'); */

The corresponding HTML for that javascript is:

<div id="preview-container">
</div>
<!-- Custom Styled File Input Button -->
<label for="file-input" id="invoke-file-input" class="btn btn-primary" data-input="file-input" data-preview="preview-container">
    Choose File
</label>
<!-- File Input -->
<input type="file" name="avatar" id="file-input" class="form-control visually-hidden">

<!-- Hidden input fields to store background path a second time -->
<input type="hidden" name="avatar-path" id="avatar-path">

and the css for those aren’t relevant

I’m hiding the input field since I want just the preview box and a button underneath it to upload the image and that part works.

I click on that label disguised as a button and it opens the file manager and uploads the image and selects the image and inserts it into the preview container just like I want it to… but I can’t manage to get the input field populated as hard as I try. I’m not very good at javascript so there might be issues here that I’m not noticing, but to be fair, chatGPT has being helping me for the past few hours on this thing and we didn’t get anywhere.

I’ve tried clearing my cache and restarting the artisan server. I literally don’t know what to do. I just need that url path so I can update the database as everything else is done, but it isn’t working.

The console doesn’t show anything and inspecting the element I see that when I select an image it doesn’t add the value to either ‘file-input’ or ‘avatar-path’ (I tried a second hidden field in case it might work, but it doesn’t).

I’ve got other hidden fields in there and they get updated VIA javascript just fine.

I’m not using react or any of those javascript front-end frameworks.