Upload Image -> Base64

Webix JS
1

Hello,

I would like to use the uploader to select an image, then base 64 encode it on the fly without sending to the server. Then I would like to put that base 64 encoded image into an image view immediately for preview. Is this possible?

In addition, I don’t need a view to show me the file name I just uploaded. I just want the target view to be an image button, or img tag, where I can store the base 64 encoded image.

Thanks!

2

I managed to solve this myself:

             {
                    id: 'preview',
                    view:'template',
                    template: '<img class="previewImage" src="#src#">',
                    data: { src: null },
                    height: 100,
                    width: 100
                },
                {
                    id: 'btnUploadPhoto',
                    name: 'photo',
                    view: 'uploader',
                    multiple: false,
                    autosend: false,
                    accept: 'image/png, image/gif, image/jpeg',
                    label: 'Select Photo',
                    labelWidth: 150
                }

…

$$(‘btnUploadPhoto’),onAfterPhotoSelected);

…

onAfterPhotoSelected: function(uploadedFile) {

    const reader  = new FileReader();
    reader.addEventListener('load', function (event) {

        const base64 = reader.result;
        $$('preview').setValues({ src: base64 });
    }, false);

    if (uploadedFile) {
        reader.readAsDataURL(uploadedFile.file);
    }
}