In extjs how to get uploaded file's contents

extjs4, file-upload, php

Solution

The contents of the file is not returned from `readAsBinaryString`, you have to set the onload callback that will be triggered when the file contents are read.

reader.onload = function (oFREvent) {
    console.log(oFREvent.target.result);
};

Problem

I am working on file upload functionality in extjs+php. I want to upload file or image from extjs and need to send it to server side which i am designing in PHP. In extjs i have view file's code as- ``` Ext.define('Balaee.view.kp.dnycontent.Content', { extend:'Ext.panel.Panel', requires:[ 'Balaee.view.kp.dnycontent.ContentView' ], id:'ContentId', alias:'widget.Content', title:'This day in a history', items:[ { xtype: 'fileuploadfield', hideLabel: true, emptyText: 'Select a file to upload...', id: 'upfile', //name:'file', width: 220 }], buttons:[ { text: 'Upload', handler: function () { var file = Ext.getCmp('upfile').getEl().down('input[type=file]').dom.files[0]; console.log(file); var reader = new FileReader(); filecontent=reader.readAsBinaryString(file); console.log(filecontent); } } ] ``` }); So when I am trying to upload animage file with the above code.The above line: `Ext.getCmp('upfile').getEl().down('input[type=file]').dom.files[0];` stores information of the file as: ``` File { webkitRelativePath: "", lastModifiedDate: Tue Jul 14 2009 11:02:31 GMT+0530 (India Standard Time), name: "Koala.jpg", type: "image/jpeg", size: 780831… } ``` i.e. Information related to file is retrieved. But the actual file contents are not getting retrieved. So what do I need to modify to get actual uploaded file?

Original source