Ext JS - example fileupload
HTML
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<h3>File Upload ExtJs</h3>
<div id="example-form"></div>
CSS
#example-form {
width: 90%;
margin: 20px;
}
JavaScript
Ext.onReady(function() {
Ext.create('Ext.form.field.File', {
id: 'uploadFile',
renderTo: 'example-form',
emptyText: 'Select a file to upload...',
fieldLabel: 'File upload',
labelAlign: 'right',
labelSeparator: ' ',
buttonText: 'Select file...',
labelWidth: 107,
padding: '3 0 0 20',
width: 400,
listeners: {
'change': function(fileUploadComponent, value, eOpts) {
this.onFileChange(fileUploadComponent, value, eOpts);
}
},
onFileChange: function(fileUploadComponent, value, eOpts) {
var file = Ext.getCmp('uploadFile').getEl().down('input[type=file]').dom.files[0];
if (file != null) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onloadend = function(oFREvent) {
var byteArray = new Uint8Array(oFREvent.target.result);
var len = byteArray.byteLength;
var binary = '';
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(byteArray[i]);
}
byteArray = window.btoa(binary);
alert(byteArray);
}
}
}
});
});