Getting SyntaxError SyntaxError: Unexpected token < in JSON at position 0

[rvadaga]

I'm using this project code in my django project to upload multiple images using the basic plus UI version. There's one change though -- in my templates, I'm using the latest version for all JS files (jquery, jquery-ui, javascript-templates, jquery-fileupload, etc.).

When I try to add files and start the upload by clicking on 'Start upload', I get the following error for each of the newly added image files (I added a console.log() to see what's causing the error):

SyntaxError: Unexpected token < in JSON at position 0
    at parse (<anonymous>)
    at ajaxConvert (jquery.js:8787)
    at done (jquery.js:9255)
    at XMLHttpRequest.<anonymous> (jquery.js:9548)

If it helps, I also included a console.trace() to see what is calling the error function. Here's the output.

People seemed to have had this issue before, as is evident from these 2 posts (post 1 and 2). However, none of the solutions worked for me.

How do I resolve this?

[sigurdga]

Without looking too much into it myself, I would guess you get some kind of error from the server side, represented as html, giving you a < which is not json. Have a look at the server response in your browser developer (network) tool (as suggested in 2).

[rvadaga]

I tried debugging as suggested in 2, but after a fair amount of effort, I've no idea what's causing it.

In the network tab, I see a request with the status code (302 found). Everything else seems normal with a status code of 200. Looking at the request's header, this is a request.POST method and the content is 'text/html'. I'm unable to see a preview or the response of this request in the browser dev tools (I get a 'Failed to load response data' error).

If I could find out the error that's coming from the server side, my problem would be solved.

[rvadaga]

The images get uploaded successfully -- I'm able to see the uploaded ones on the admin site. There doesn't seem to be any error from the server side as well. The only abnormality, if any, would be the 302 status code in the network panel of the browser dev tools.

Some say this isn't an abnormality, and it is a standard practice to receive a 302 after a successful POST request (see the comments on this post.) I've checked your code -- it returns a 200 status code on a successful POST request.

Is there some way to find out what input the JSON parser is receiving? The output from console.trace() is too long, and I don't know where to start.

[rvadaga]

I found what went wrong. While overriding the form_valid method, I called the original implementation of form_valid from CreateView class. So I was getting a HTML response, in addition to JSON response. I removed the super() statement, and things just work fine.