Changing images after selecting ExtJs

Question

How can I preview images in ExtJs ? I mean, I am using FileUploadField and I want to select an image and set a place to show the image selected in my form.

Answer 1

You will need to handle file upload field's event to read event and retrieve image as data URL and set it manually to image component.

Here is working code to achieve this with ExtJS 5.x:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: "FileUpload Filed with Image Preview",
            items: [{
                xtype: "filefield",
                listeners: {
                    'change': function (newVal) {
                        var file = newVal.fileInputEl.el.dom.files[0];
                        var reader = new FileReader();
                        console.log(reader);
                        reader.readAsDataURL(file);
                        reader.onload = function (evt) {
                            var image = Ext.getCmp("imageid");
                            image.setSrc(evt.target.result);
                        }
                    }
                }
            }, {
                id: "imageid",
                xtype: "image",
                style: "border: 1px solid black",
                width: 500,
                minHeight: 200,
                height: 'auto'
            }]
        });
    }
});

Working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2ds2