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.
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.