Replace image URL

I uploaded images successfully, but I do not know how to replace base64 image url with uploaded image url ? Here the function in button code:

_uploadImage: function _uploadImage(file, editor) {
    if (!file.type.match(/image.*/)) {
        alert('File Type must be an image');
        return false;
    }
    var reader = new FileReader();
    reader.onload = (function(f) {
        return function(e) {
            // var html = '<figure>';
            // html += '<img src="' + e.target.result + '" alt="' + f.name + '">';
            // html += '<figcaption>';
            // html += '<small>' + f.name + '</small>';
            // html += '</figcaption>';
            // html += '</figure>';
            // var el = CKEDITOR.dom.element.createFromHtml(html);
            html = '<p><img src="' + e.target.result + '" alt="' + f.name +'"><span class="progress"></span></p>';
            var el = CKEDITOR.dom.element.createFromHtml(html);
            editor.insertElement(el);
            editor.fire('actionPerformed', this);
            var imageData = {
                el: el,
                file: file
            };
            editor.fire('imageAdd', imageData);
        };
    })(file);
    reader.readAsDataURL(file);
    editor.on('imageAdd', function(e){
        // console.log(e);
        console.log(e.data.el);
        // $(e.data.el).html('sadasd');
        // $(e.data.el.$.innerHTML).attr('data-test', 'test')
        var method = 'POST';
        var url = '/cms/post/upload';
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        var token = $('meta[name="csrf-token"]').attr('content');
        fd.append('_token', token);                    
        fd.append('upload', file);
        xhr.open(method, url, true);
        xhr.onreadystatechange = function(response) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Every thing ok, file uploaded
                // console.log(xhr.responseText); // handle response.
                var response = jQuery.parseJSON(xhr.responseText);
                console.log(response.success);
            }
        };
        xhr.onload = function(response) {
            var response = jQuery.parseJSON(xhr.responseText);
            console.log(response.img_url);
        }
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                // console.log((evt.loaded / evt.total) * 100 + "%");
            }
            else {
                // No data to calculate on
            }
        }, false);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(fd);
    });
    editor.on('actionPerformed', function(e){
        // console.log(e);
        // console.log(e.data.result);
    });
}

[ipeychev]

Here is how we do it in Liferay Portal:
When we upload the image, the server returns us an URL - the URL of the uploaded image. Since we already have the img element (event.data.el), we simply replace its "src" attribute with the returned URL from the server.

[bettysteger]

@ipeychev i am currently doing this as you described (.setAttribute('src', url);), but i got one problem:

1. Upload a big image
2. In the meantime click on the image (ckimgrsz CSS class is added)
3. Image Element disappears completely

[bettysteger]

ok i fixed it like this:

1. Add CSS class uploading to image tag
2. Remove CSS class uploading after setting the src

and the CSS class is simply:

.uploading {
  pointer-events: none;
}