PDA

View Full Version : Fileupload via Json



henriqueo
25 Mar 2013, 3:22 PM
Hi guys,

I need to upload a file to a REST service that accepts a object this format:
{
"name":"file1",
"resourceId":"resource1",
"resourceType":"TEMPLATE",
"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++) {
reader.readAsDataURL(file);
}


}
}


Any ideas how to do this using Extjs?

mitchellsimoens
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.

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

cheers

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

mitchellsimoens
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

mjhaston
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() {
Ext.Ajax.request({
url: '/attach.php',
jsonData: {
mode: 'SAVE',
quoteNumber: vm.get('quoteNumberValue'),
fileType: vm.get('fileTypeValue'),
attachment: vm.get('serverfile'),
fileAsBlob: reader.result
},
success: function() {
btn.up('window').close();
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.');
};

reader.readAsDataURL(valueElement);
},

mjhaston
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.


https://fiddle.sencha.com/#view/editor&fiddle/2gkg

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.


Thanks.