Blueimp Problems with image resize - blueimp

Question

I have developed a website in php using codeigniter with blueimp to upload images and it is working perfectly, but image resize doesn't work. Follow main.js
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'admin/upload/do_upload'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
if (window.location.hostname === 'blueimp.github.io') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
dataType: 'json',
// 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 && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 800,
imageCrop: true // Force cropped images
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: 'admin/upload/do_upload',
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// 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, $.Event('done'), {result: result});
});
}
});
In my View you have the following JS imported:
<script src="<?= base_url('libs/js/fileupload/jquery.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/vendor/jquery.ui.widget.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/tmpl.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/load-image.all.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/canvas-to-blob.min.js') ?>"></script>
<script src="<?= base_url('libs/bootstrap/js/bootstrap.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/query.blueimp-gallery.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.iframe-transport.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-process.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-image.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-validate.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-ui.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/main.js') ?>"></script>
I am currently using XAMPP for testing, I saw here in the forum that I should change if (window.location.hostname === 'blueimp.github.io') to if (window.location.hostname === 'localhost') {But it still doesn't work.
Every time I upload it it drops in ELSE and not in the IF where the resize part is. What would be the mistake?
Thank you.

Answer 1

For Debugging the Image upload
use console.log(window.location.hostname) in else condition.
Check the path of one image by directly accessing the IMAGE Url in your browser.
Then check thumbnail image path on your website using ISPECT element in your browser.
I hope this will solve your problem.