PDA

View Full Version : Uploading a file from a filefield within a gridpanel?



Maxeta
22 Oct 2013, 12:13 PM
I seem to be having some trouble actually performing a file upload. Here is my code so far:

VIEW:


Ext.define('appName.view.windows.vFileGrid', {
extend: 'Ext.window.Window',


xtype: 'FileGridWindow',
alias: 'widget.windows.vFileGrid',


items: [{
xtype: 'gridpanel',
columns: [{ text: 'Name', dataIndex: 'Name', flex: 1}],
store: 'windows.sFiles',
height: 300,
width: 600,
buttons: {
items: [
{ xtype: 'filefield', itemId: 'btnUpload', buttonOnly: true, buttonText: 'Upload', buttonConfig: { style: { width: '75px'}} },
{ xtype: 'button', itemId: 'btnDownload', text: 'Download', width: '75px' },
{ xtype: 'button', itemId: 'btnDelete', text: 'Delete', width: '75px' }
]
}
}],


initComponent: function () {
var me = this;
me.callParent();
}


});


CONTROLLER:


Ext.define('appName.controller.windows.cFileGrid', {
extend: 'Ext.app.Controller',
models: ['windows.mFile'],
stores: ['windows.sFiles'],
views: ['windows.vFileGrid'],


init: function () {
var me = this;
me.control({
'FileGridWindow gridpanel filefield[itemId=btnUpload]': { change: me.fileUpload },
'FileGridWindow gridpanel button[itemId=btnDownload]': { click: me.fileDownload },
'FileGridWindow gridpanel button[itemId=btnDelete]': { click: me.fileDelete }
});
},


fileUpload: function (me, value, eOpts) {
//What do I do here???
}

}


I'm not sure if my grid needs to be wrapped in a form, or if I need to be using a fileuploadfield? Can anyone help me out. I basically need to post the file data to a WCF service method, in the form of "http://domain/service.svc/upload?fileName=TheActualFileNameHere".

Maxeta
23 Oct 2013, 9:19 AM
Well I got it mostly working, but I'm not sure if there is a better way (or best practices way). My current issue is that after the submit, the success never runs (the file is uploaded 100% fine). I can see a 200 coming back in fiddler, so I have a good response. And if I return any json, like {'success':true, 'msg':'Successful' } the browser just wants me to download a json file rather than be processed by EXTjs? Any ideas?


My code is below:

VIEW:


Ext.define('appName.view.windows.vFileGrid', {
extend: 'Ext.window.Window',


xtype: 'FileGridWindow',
alias: 'widget.windows.vFileGrid',
title: 'Maxeta.Services.IO.FileHandler',


items: [{
xtype: 'form',
headers: {'Content-Type':'multipart/form-data'},
items: [{
xtype: 'gridpanel',
columns: [{ text: 'Name', dataIndex: 'Name', flex: 1}],
store: 'windows.sFiles',
height: 300,
width: 600,
buttons: {
items: [
{ xtype: 'filefield', itemId: 'btnUpload', buttonOnly: true, buttonText: 'Upload', buttonConfig: { style: { width: '75px'}} },
{ xtype: 'button', itemId: 'btnDownload', text: 'Download', width: '75px' },
{ xtype: 'button', itemId: 'btnDelete', text: 'Delete', width: '75px' }
]
}
}]
}],


initComponent: function () {
var me = this;
me.callParent();
clog('vFileGrid.initComponent()');
}


});


CONTROLLER




Ext.define('appName.controller.windows.cFileGrid', {
extend: 'Ext.app.Controller',
models: ['windows.mFile'],
stores: ['windows.sFiles'],
views: ['windows.vFileGrid'],


init: function () {
var me = this;
me.control({
'FileGridWindow gridpanel filefield[itemId=btnUpload]': { change: me.fileUpload }
});
},


fileUpload: function (me, value, eOpts) {
var grid = me.findParentByType('gridpanel');
var filePath = value.split('\\');
var fileName = filePath[filePath.length - 1];
var form = me.up('form').getForm();
if (form.isValid()) {
form.submit({
url: './FileHandler.svc/Upload?fileName=' + fileName,
success: function (fp, o) {
var store = grid.getStore();
store.reload();
}
});
}
}


});


UPDATE: Turns out I was returning a String from my WCF service, when really I needed to be returning an object, but marking it as text/html instead of the default JSON. Looks like this is do to the use of an iframe in the upload process. So basically it was this:

"{'msg':'Successful','success':true}"

vs this:

{"msg":"Successful","success":true}

things are working as expected now.