View Full Version : Fileupload via Json

25 Mar 2013, 3:22 PM
Hi guys,

I need to upload a file to a REST service that accepts a object this format:
"data":"<File Data>" //here goes the file
I have tried to get the file using File API(Html 5) but when I call extractFileInput() it erases the file field(but it gets the file)
xtype: 'filefield',
name: 'data',
fieldLabel: 'Imagem',
allowBlank: false,
minLength: 3,
maxLength: 45,
listeners: {
'change': function(a, b, c){
var reader = new FileReader();
var el = a.extractFileInput();

for (var i = 0, file; file = el.files[i]; i++) {


Any ideas how to do this using Extjs?

27 Mar 2013, 12:47 PM
Ext JS isn't going to handle this, this is just JavaScript. If you get the file data as a string (base64) then you will be able to send it in a request with no problems.

27 Mar 2013, 1:21 PM
tks dude, I did it..
working pretty well


10 May 2018, 5:29 AM
Can you share how you got this working?

10 May 2018, 6:04 AM
Can you share how you got this working?

base64 encoded but these days javascript can support binary uploads now: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

10 May 2018, 10:20 AM
I was able to use some code I found on a further search and slam it into my code:

onAttachFileClick: function(btn) {
var me = this,
vm = me.getViewModel(),
valueElement = me.lookupReference('attachment').getEl().down('input[type=file]').dom.files[0],
reader = new FileReader();

reader.onload = function() {
url: '/attach.php',
jsonData: {
mode: 'SAVE',
quoteNumber: vm.get('quoteNumberValue'),
fileType: vm.get('fileTypeValue'),
attachment: vm.get('serverfile'),
fileAsBlob: reader.result
success: function() {
me.getView().fireEvent('aftersave', ' ');
me.showToast('Attachment has been added.');
failure: function() {
me.showToast('<b>BOOM!</b><br /><br />Something went horribly wrong');
reader.onerror = function(e) {
console.log('The File APIs are not fully supported in this browser.');


11 May 2018, 11:11 AM
I have an issue, I'm not sure if I'm doing something wrong. If you use this fiddle to select an image file 200k or larger, I find I get a difference between what is in the reader.result value and what is actually POSTed in the fileAsBlob value.


To test I would set a break at the Ext.Ajax.request and inspect the value of reader.result. This value seems correct and matches two other conversion utilities I've tried.

Let the script run and do the request. If you look at the request payload fileAsBlob, that value does not match reader.result.