View Full Version : "you're trying to decode invalid json" while uploading file to httphandler

30 Apr 2013, 10:00 AM

I am using file field for uploading files and using form.submit approach to upload to httpHandler. I was getting "you're trying to decode invalid json", i googled and found answer at http://forums.ext.net/showthread.php?16125-CLOSED-Error-when-uploading-file-to-httphandler

N (http://forums.ext.net/showthread.php?16125-CLOSED-Error-when-uploading-file-to-httphandler)ow i am facing another problem, if there are any errors, for eg.. file size exceeded the limit, i am getting same "you're trying to decode invalid json" error and not sure how to handle it. The response is html. In the earlier case i could write json data to response object and send it back. But this is even before reaching to httpHandler.

Any Ideas? Is there a way to upload file using AJAX instead of form.submit? so that i can use webservice and handle the response properly.

PS: My form.submit url looks like:

url: ApplicationSetup.globals.localhosturl + '/AdminUI/handlers/DataImportUpload.ashx?inputFile=' + filename + '&id=' + 0 + '&_authToken=' + ApplicationSetup.Session.sessiontoken,


1 May 2013, 9:51 PM
Can you post a code snippet of how you're setting up the submit? Of particular interest would be what you have configured for the success/failure callback handlers.

2 May 2013, 9:24 AM
url: ApplicationSetup.globals.localhosturl + '/AdminUI/handlers/DataImportUpload.ashx?inputFile=' + filename + '&id=' + connectionid + '&_authToken=' + ApplicationSetup.Session.sessiontoken,
waitMsg: 'Uploading your file...',
success: function (form, o) //(3)
if (o.result.success === true) {
title: 'Result',
msg: o.result.msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
failure: function (form, o) //(4)
title: 'Result',
msg: o.result,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR

2 May 2013, 1:19 PM
First, I'm using ExtJS 4.1.1:

The way I handled this was to create a singleton class for monitoring the Connection class. The processing happens before it tries to parse as JSON. Since for me, the only process using a standard HTTP post is the file upload, I was able to handle it this way. Below is an abbreviated version of what I have ( I also use this to handle unexpected server errors such as HTTP 500 errors, although I've removed that portion from the excerpt below).

By including the class name in the 'requires' attribute of the Application class, it is self initialized.

Ext.define('MyApp.util.GlobalExceptionHandler', {
extend : 'Ext.Base',
singleton : true,

requires : ['Ext.util.Observable',

init : function() {
// For Handling Global Exception Errors 500, 404, 403, ...
Ext.data.Connection.on('requestexception', this.onRequestException);

// Handle redirect for requests when there is a timeout of some sort...
Ext.data.Connection.on('requestcomplete', this.onRequestComplete);

onRequestException : function(connection, response, options) {
// For Handling Global Exception Errors 500, 404, 403, etc.
// ...

onRequestComplete : function(connection, response, options) {
// Handle redirect for requests when there is a timeout of some sort...
// ...

// Handle Upload file errors (only process not going through a standard AJAX request...
if (response.responseXML != null && response.responseText.indexOf('</') >= 0) {
var htmlOutput = response.responseText;

// Reset Response text to a JSON object that can be parsed (changed to match your example)
response.responseText = '{"success": false, "message": "File Upload Failed."}';

// Open Window to show actual HTML response received
Ext.create('Ext.window.Window', {
title: 'Upload Failed Error',
height: 500,
width: 600,
modal : true,
constrain: true,
layout : 'fit',
items : [{
xtype : 'panel',
html : htmlOutput
bbar : [{
xtype : 'tbfill'
}, {
xtype : 'tbseparator'
}, {
xtype : 'button',
text : 'Close',
handler : function() {
}, function() {
// Init the exception handler upon load

17 May 2013, 1:50 PM
sorry for late response and thanks for the reply. Version i am using is 4.1 .The more i am testing my app, i feel like i need to have JSON decode issue handling on application as a whole and not just for form.submit. few things:

1. the code you provide i guess if condition need to be corrected.
"response.responseXML != null && response.responseText.indexOf('</') >= 0"

indexOf could be true even if the reponse is JSON some times and i did below (may be not accurate):

var json = JSON.parse(response.responseText);
catch (e) {
// Handle Upload file errors (only process not going through a standard AJAX request...
//if (response.responseXML != null && response.responseText.indexOf('</') == 0) {
if (response.responseText.length >= 1 && response.responseText.substring(0, 1) !== '{') {...}

2. secondly some times the response can be formatted plain text like below

" \nServer Error in Application \"DEFAULT WEB SITE/SAAS\" \n....... View more information \n \n \n \n \n \n \n" String

and am not sure how to show these nicely in window... setting as html does not format it properly.

3. We are making lot of ajax calls to other web app and some of the responses can be in json, some in html and some in plain formatted text... I am looking for solution to handle them and show them nicely. And we want to handle these only when any exception or failures happen while making calls.