Blueimp jQuery File Upload returning html instead of json

Question

I downloaded the blueimp Jquery-File-Upload plugin, and outside of configuring it to use my server ( in js/main.js ) and changing the premissions on the upload directory it is the default.

When I select a file and click upload in chrome it says:

Error SyntaxError: Unexpected token <

In firefox it says:

Error SyntaxError: JSON.parse: unexpected character

I examined the difference between using it on my server and on the demo server, on my server in firebug the POST return is the entire index.html:

<!DOCTYPE HTML>
<!--
/*
 * jQuery File Upload Plugin Demo 7.4
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
....

but on the demo server it returns JSON data:

{"files":[{"url":"http://jquery-file-upload.appspot.com/AMIfv97-LLxfuAdNifW5y8e1aHvb7HOkXdAC98NXM2Z_exEt27wxS5C4ZEzyd8BDGdZ8SHFQmbNquPIA7DIDvIMP60FvAxc6awXi--OF4z9OPbCCJquPG6hPyMyaheg9_mPpg_MdSQxuI-qczS6EFVSDOJ3qyU1AcrdM1O1WRKVNlD0gJhvYxuI/boot.png","thumbnail_url":"http://lh3.ggpht.com/HzbIhw7LOI7ltQJguWkvYCaQyNjnvkHTjbbxiZecFwi-pss98mjchv5KtoN_yVTqCvzwZj8WQHPB5u1BHOsZbxYPJBSf6XbxRg=s80","name":"boot.png","type":"image/png","size":172728,"delete_url":"http://jquery-file-upload.appspot.com/AMIfv97-LLxfuAdNifW5y8e1aHvb7HOkXdAC98NXM2Z_exEt27wxS5C4ZEzyd8BDGdZ8SHFQmbNquPIA7DIDvIMP60FvAxc6awXi--OF4z9OPbCCJquPG6hPyMyaheg9_mPpg_MdSQxuI-qczS6EFVSDOJ3qyU1AcrdM1O1WRKVNlD0gJhvYxuI/boot.png?delete=true","delete_type":"DELETE"}]}

Here is the modified section of js/main.js that I changed:

if (window.location.hostname === 'example.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//example.com/script-location/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//example.com/script-location/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }
} else {

Other then that, the only other change I made was in index.html to have the form action point to my script. There are no errors in the apache error_log.

I'm sure I missed something, but I can't seem to find it.

Additional information: PHP Version 5.3.20 / Apache/2.2.22 (Fedora)

If there's any other relevant code that would be useful let me know and I'll update this post. Any help would be appreciated.

The server needs to make a JSON response and send it back. So when you invoke "example.com/script_location", the PHP code should return a well formed JSON. The file upload component has some sample server side code too: github.com/blueimp/jQuery-File-Upload/tree/master/server/php — Dhruv Chandna
– Dhruv Chandna, Commented Jun 8, 2013 at 17:56
Inside of js/main.js it has url: 'server/php', which points to the server/php/index.php. Does that have to be modified for it to work? I look at it briefly, and it looks like it created a new UploadHandler(), but I don't see any errors being generated in there, and I haven't modified any of that code. — Rob
– Rob, Commented Jun 8, 2013 at 18:04
Since you have changed the "url" attribute of the fileupload component, just make sure that you put the UploadHandler functionality at "//example.com/script-location/" too. — Dhruv Chandna
– Dhruv Chandna, Commented Jun 8, 2013 at 18:21
I believe all the paths are set correctly. I checked my access_log and see only the initial index.html hit when the page is loaded, and the POST after I click upload. The error_log is empty. As far as I can tell it never even gets to the php code. — Rob
– Rob, Commented Jun 8, 2013 at 19:11

Rob · Accepted Answer · 2013-06-09 03:22:33Z

Well I figured it out, window.location.hostname that I changed to my servers name is only for the demo and has to be left alone ( or removed entirely ). Not sure how I missed that originally, but hopefully if someone else makes this mistake this will help.

if (window.location.hostname === 'blueimp.github.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//jquery-file-upload.appspot.com/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }

Has can be left alone, or removed entirely.

Rahul K · Accepted Answer · 2013-07-23 09:53:26Z

You can try this block of code in localhost(xampp)

if (window.location.hostname === 'localhost') //blueimp.github.io
{
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//localhost/Upload/server/php/',
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        maxFileSize: 25000000,
        acceptFileTypes: /(\.|\/)(mp4|mpeg|mpeg1|3gp|gif|jpe?g|png)$/i
    });

    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//localhost/Upload/server/php/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }

    // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, null, {result: result});
        });
}

Wilf · Accepted Answer · 2014-02-05 15:02:20Z

0

Just simply replace blueimp.github.com with your domain name (yourdomain.com).

answered Feb 5, 2014 at 15:02

Wilf

2,3156 gold badges40 silver badges83 bronze badges

Collectives™ on Stack Overflow

Blueimp jQuery File Upload returning html instead of json

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related