ramin-2.js

$(function() {

    function showToast(parent, text, timeOut) {
        let toast = $('<div></div>').html(text);
        toast.appendTo(parent);
        window.setTimeout(function() {
            toast.remove();
        }, timeOut);
    }

    const input = $(':file');

    input.change(function() {
        let t = $(this),
            data = new FormData(),
            json, text = "",
            xhr = new XMLHttpRequest();
        data.append('imageToUpload', this.files[0]);
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                json = JSON.parse(this.responseText);
                text += '<div class="alert alert-info mt-4">';
                text += json.messages + '<br>';
                text += json.details.type + '<br>';
                text += json.details.size + '<br>';
                text += json.details.path.replace(/^(Path:\s*)(.*?)$/i, '$1<a href="$2" target="_blank">$2</a>');
                text += '</div>';
                // Display response text after the uploaded file
                showToast(t.parent(), text, 3000);
            }
        };
        xhr.open('POST', '/stockx/dashboard/uploadImage', true);
        xhr.send(data);
    });

});