Выбор изображения в плагине Gridster JQuery

Question

На моем веб-сайте я использую виджеты гридстера. На виджетах есть изображения, полученные из удаленного места. Я хотел бы, чтобы пользователь также мог добавлять изображения на виджеты. Когда пользователь нажимает кнопку "Добавить изображение", должно появиться диалоговое окно с набором изображений. Как это может быть сделано?

var gridster;


gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 100],
    widget_margins: [5, 5],
    helper: 'clone',
    serialize_params: function($w, wgd) {
        return {
            images: $w.find('textarea').val().trim(),
            col: wgd.col,
            row: wgd.row,
            size_x: wgd.size_x,
            size_y: wgd.size_y
        }
    },
    resize: {
        enabled: true
    }
}).data('gridster');


var json = [{
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    }, {
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
        "col": 4,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    },

    {
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 1 Image
        "col": 6,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    }

];




for (var index = 0; index < json.length; index++) {
    var images = json[index].html.split(',');
    var imageOutput = "";

    for (var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src=' + images[j] + '> <input type="button" class="removediv" value="X" /></div></div>';
    }

    gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>' + json[index].html + '</textarea></li>', json[index].size_x, json[index].size_y, json[index].col, json[index].row);
}




$('.removediv').on('click', function() {
    var textArea = $(this).parent().next();
    var text = textArea.val();
    var imgSrc = $(this).prev().attr("src");
    textArea.val(text.replace(imgSrc, ""));
    $(this).closest('div.imagewrap').remove();
    serialize();
});


$(document).on("click", ".delete-widget-button", function() {
  var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});


$('.js-seralize').on('click', function() {
    serialize();
});

function serialize(){
var s = gridster.serialize();
    $('.gridster ul li').each((idx, el) => { // grab the grid elements
        s[idx].html = $('textarea', el).html(); // add the html key/values

        json_variable = JSON.stringify(s)
    });
    $('#log').val(json_variable);
}



//I want to display multiple images on new json into the widgets along with delete image button on each image

textarea {
  resize: none;
  overflow: scroll;
  width: 80%;
}
.imagewrap {display:inline-block;position:relative;}
.removediv {position:absolute;right:1%;top:1%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link href="https://dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet">
<div class="gridster">
    <ul>
    
    </ul>
        
</div>
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>