Jquery file uploader blueimp, Unexpected Token/Character

Question

First of all let me tell you that I've already searched for some answers, and while it helped me out a bit, my main problems remain unresolved.

I used the file uploader (Version 9.8.0) @ http://blueimp.github.io/jQuery-File-Upload/

(1st problem)
Everything seems to work fine until I start uploading. After it finishes uploading, it says the following error for each image (instead of the "upload successful" message).

On Google Chrome it says: "SyntaxError: Unexpected token <"
on Mozilla FireF. it says: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"

I searched some solutions but I can't figure out how to apply these solutions. And btw, it adds the image, despite the error.

Answer 1

The method you are calling is throwing an error page with html (starting with < and cannot be parsed in JSON), if you look at the network tab in your browser.

For example in Google Chrome:

1. Open debugger: F12
2. Go to network tab
3. Do the upload
4. You should see the request that was sent in the Network tab
5. Click on that error request
6. That will open a new window with a tab for the response from the server. This response will most likely be some kind of exception message.

I had a similar problem on ASP.Net MVC with a different uploader, when one of the parameters was sent as null and it wasn't nullable on the controller.

Answer 2

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data check out this SO and see if your problem is related.
Basically, it could mean that the Success Message returned doesn't have proper HTML markup and hence the browser is not able to display them.

Answer 3

Most likely you're trying to JSON.parse a server provided error message or other non-JSON response, and this is probably HTML, given the first character it choked on.

I'd open the console, get the page to produce the error, find the request in the Network tab of the dev tools, and check the response tab of the upload request(s) to see what is actually being returned.

Hopefully seeing the response will lead you to the solution (like fixing an error message) or a more specific question that can be asked.

Answer 4

I solved this problem by editing url in main.js file with index.php at finally, like this:

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: 'imagegallery/server/php/index.php'
});