JSFiddle - React, Tailwind, and code Playground

by suamikim

HTML

<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all-debug.css">
<script src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>

JavaScript

Ext.onReady(function() {
    // Create window which holds the dataview
    Ext.create('Ext.window.Window', {
        title: 'File-API-Tester',
        width: 500,
        height: 300,
        
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        
        items: [{
                xtype: 'form',
                items: [{
                        xtype: 'filefield',
                        //inputType: 'file',
                        width: 400,
                        listeners: {
                            change: function(field, value) {
                                var files = this.fileInputEl.dom.files,
                                    reader = new FileReader,
                                    textarea = this.up().up().down('textarea');
                                
                                // !!! Important: In order to make this work, the inputType of the filefield MUST NOT be 'file' !!!
                                // !!! If inputType='file' the files-array is always of 0-length !!!
                                if (files && files[0]) {
                                    reader.onload = function(e) {
                                        textarea.setValue('completed reading of content:\r\n\r\n' + e.target.result);
                                    };
                                    reader.onprogress = function(e) {
                                        console.warn('progress:', e);
                                    }
                                    reader.onerror = function(e) {
                                        console.warn('error:', e);
                                    }
                                    reader.readAsText(files[0]);
                                } else {
                                    textarea.setValue('No files selected!');
                                }
                            }
                        }
                }]
           ...