ExtJS 4 and display PDF from BLOB

Question

I try to display PDF stream in separate window and this stream is from database BLOB field. My code is the following:

Ext.define('MyApp.view.ViewPDF', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    requires: [
        'Ext.toolbar.Toolbar',
        'Ext.button.Button'
    ],

    config: {
        title: '',
        source: ''
    },

    itemId:    'SHOW_PDF',
    closable:  false,
    resizable: true,
    modal:     true,

    onClose: function (clsbtn) {
        clsbtn.up('window').destroy();
    },


    initComponent: function () {
        var my = this;

        Ext.apply(my, {
            items: [
                {
                    xtype:  'panel',
                    layout: 'fit',
                    width:  640,
                    height: 780,
                    items: [
                        {
                            items: {
                                xtype:  'component',
                                align:  'stretch',
                                autoEl: {
                                    tag:      'iframe',
                                    loadMask: 'Creating report...please wait!',
                                    style:    'height: 100%; width: 100%; border: none',
                                    src:      'data:application/pdf;base64,' + tutaj.getSource()
                                }
                            }
                        }
                    ]
                }
            ],
            dockedItems: [
                {
                            xtype:  'toolbar',
                            dock:   'bottom',
                            height: 30,
                            items: [
                                '->',
                                {
                                    xtype:   'button',
                                    baseCls: 'x-btn-default-large',
                                    cls:     'cap-btn',
                                    handler: my.onClose,
                                    width:   55,
                                    margin:  '0, 10, 0, 0',
                                    style:   'text-align: center',
                                    text:    'Close'
                                }
                            ]
                        }
                    ]
        });
        my.callParent();
        my.title = my.getTitle();
    }
});

and it's working only via FireFox browser. In Chrome I can see empty window. So two questions (can't answer myself):

1. how to correct above to display this PDF stream in other browsers

2. how to display text in mask because loadMask in code above can't work; just display text starting with window open and finishing when PDF is displayed

Be so kind as to prompt me what's wrong in this code.

Answer 1

I have created a FIDDLE using filefield, BLOB and FileReader. I have tested in chrome and Fire Fox. I hope this FIDDLE will help you or guid you to solve your problem.

CODE SNIPPET

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    height: window.innerHeight,
    title: 'Iframe Example for PDF',
    bodyPadding: 10,

    items: [{
        xtype: 'fileuploadfield',
        buttonOnly: true,
        buttonText: 'Choose PDF and show via BLOB',
        listeners: {
            afterrender: function (cmp) {
                cmp.fileInputEl.set({
                    accept: '.pdf'
                });
            },
            change: function (f) {
                var file = document.getElementById(f.fileInputEl.id).files[0];
                this.up('form').doSetPDF(file);
            }
        }
    }, {
        xtype: 'fileuploadfield',
        buttonOnly: true,
        buttonText: 'Choose PDF and show via BASE64 ',
        listeners: {
            afterrender: function (cmp) {
                cmp.fileInputEl.set({
                    accept: '.pdf'
                });
            },
            change: function (f) {
                var file = document.getElementById(f.fileInputEl.id).files[0];
                this.up('form').doSetViaBase64(file);
            }
        }
    }, {
        xtype: 'box',
        autoEl: {
            tag: 'iframe',
            loadMask: 'Creating report...please wait!',
            width: '100%',
            height: '100%'
        }
    }],

    //Show pdf file using BLOB and createObjectURL
    doSetPDF: function (file) {
        if (file) {
            var form = this,
                blob, file;

            if (Ext.isIE) {
                this.doSetViaBase64(file)
            } else {
                blob = new Blob([file], {
                        type: 'application/pdf'
                    }),
                    file = window.URL.createObjectURL(blob);

                form.getEl().query('iframe')[0].src = file;
            }
        }
    },
    //Show pdf file using BASE64
    doSetViaBase64: function (file) {
        var form = this,
            reader = new FileReader();

        reader.readAsDataURL(file);
        reader.onload = function () {
            form.getEl().query('iframe')[0].src = this.result;
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }
});