JavaScript file upload after 3G compression

Question

I'm having a problem with a page on my site chillingsafe.com/upload.php and I was hoping some of you would be able to help me.

Many 3G network providers compress web pages and images to lower the amount of data used, they do this by injecting this line of code script src="http://1.2.3.8/bmi-int-js/bmi.js" language="javascript" just after the opening html tag.

The problem with this is that not only does it downscale images, but it compresses your code and usually forces it onto a single line. After this is done my uploading system on my website will not work correctly. It actually causes this error which I found in Chromes console, Uncaught TypeError: Cannot read property 'innerHTML' of null. I understand what this means but I do not know how to fix it, especially when there is no problems at all on a standard broadband connection.

I would be grateful if someone could assist me on this.

Thanks, Joe

Answer 1

Had a quick look at your code. (The one inline/embedded in the main page.)

There are some issues here.

1.) You almost never use var. As a result all your variables are hoisted up to global space.

function foo() {
   answer = 42;
}
foo();

Now window.foo === 43, or simply foo if you like.

In one of your scopes you also have use strict. As a result the undefined variables will not be hoisted up, but you will typically get a:

Uncaught ReferenceError: somevariablename is not defined

2.) You never use hasOwnProperty() on your for in loops. Always use:

for (x in y) {
    if (y.hasOwnProperty(x)) {
        ....
    }
}

If it is an array never use for in but:

var i;
for (i = 0 ; y.length ;  ++i) {

}

In your code you do a lot of for in on arrays. Don't!

3.) On line 352 you are missing a semicolon:

html += '" onClick="">' // ««« Missing semicolon!
if (isSuccess == false) {
html += data.error_result_html;

4.) Inline comments.

If script get compressed by some poor implemented compressor inline codes are an issue:

var x = 123;
// some comment
alert(x);

could result in

var x = 123; // some comment alert(x);

5.) Cannot read property 'innerHTML' of null

Could mean some of your code is executed out of order. E.g. it is executed before DOM is ready. From what I can see only the last interval thing is outside the ready wrap of jQuery. Try to add it inside the wrapper as well.

$(document).ready(function () {

    ...

    function CheckTables() {
        $("table ").each(function (index) {
            $(this).find('tbody:empty').parent().hide();
            $(this).find('tbody:not(:empty)').parent().show();
        });
    }
    setInterval(CheckTables, 100);
});

You could also try to replace ready() with:

$(window).load(function() {

});

in both instances.

---

There might be more. Try fixing number 3 first.

---

A quick format and some comment and var insertions etc. from extracted code:

---

/* jshint sub:true, eqeqeq:false */
/* global $, ZeroClipboard, alert, bytesToSize, humanReadableTime */
/* exported updateTotalFilesText, setRowClasses, sendAdditionalOptions */
/* ============================================================================ */
var fileUrls = [];
var fileDeleteHashes = [];
var fileShortUrls = [];

var fileToEmail = '';
var filePassword = '';

var startTime = null;
var uploadComplete = false;
function getUrlsAsText() {
    var urlStr = '';
    for (var i = 0; i < fileUrls.length; i++) {
        urlStr += fileUrls[i] + "\n";
    }
    return urlStr;
}
function setupCopyAllLink() {
    $('#copyAllLink').attr('data-clipboard-text', getUrlsAsText());
    var clip = new ZeroClipboard(document.getElementById("copyAllLink"), {
        moviePath: "http://cdn.chillingsafe.com/scripts/zeroClipboard/ZeroClipboard.swf",
        text: getUrlsAsText()
    });
    clip.on('complete', function (client, args) {
        alert("" + args.text);
    });
}
function updateProgessText(progress, uploadedBytes, totalBytes) {
    var nowTime = (new Date()).getTime();
    var loadTime = (nowTime - startTime);
    if (loadTime === 0) {
        loadTime = 1;
    }
    var loadTimeInSec = loadTime / 1000;
    var bytesPerSec = uploadedBytes / loadTimeInSec;
    var textContent = '';
    textContent += '' + progress + '% complete';
    textContent += ' ';
    textContent += '(' + bytesToSize(uploadedBytes, 2) + ' of ' + bytesToSize(totalBytes, 2) + ')';
    $("#fileupload-progresstextLeft").html(textContent);
    var rightTextContent = '';
    rightTextContent += '' + humanReadableTime((totalBytes / bytesPerSec) - (uploadedBytes / bytesPerSec)) + ' remaining';
    rightTextContent += ' at ' + bytesToSize(bytesPerSec, 2) + 'P/s';
    $("#fileupload-progresstextRight").html(rightTextContent);
}
function updateTitleWithProgress(progress) {
    if (typeof (progress) == "undefined") {
        progress = 0;
    }
    if (progress === 0) {
        $(document).attr("title", "Upload - ChillingSafe");
    } else {
        $(document).attr("title", progress + "% complete - ChillingSafe");
    }
}
function getTotalRows() {
    var totalRows = $('#files .template-upload').length;
    if (typeof (totalRows) == "undefined") {
        return 0;
    }
    return totalRows;
}
function updateTotalFilesText(/*total*/) {
    //$('#uploadButton').html('upload '+total+' files');
}
function setRowClasses() {
    //$('#files tr').removeClass('even');
    //$('#files tr').removeClass('odd');
    //$('#files tr:even').addClass('odd');
    //$('#files tr:odd').addClass('even');
}
/* Never used
var lastEle = null;
function showAdditionalInformation(ele) {
    $('.sliderContent table').unbind();
    $('.sliderContent table').click(function (e) {
        e.stopPropagation();
    });
    if (lastEle == ele) {
        $('.sliderContent').slideUp('fast');
        $('.sliderContent').parent().parent().removeClass('rowSelected');
        lastEle = null;
        return false;
    }
    lastEle = ele;
    $('.sliderContent').slideUp('fast');
    $('.sliderContent').parent().parent().removeClass('rowSelected');
    $(ele).addClass('rowSelected');
    $(ele).find('.sliderContent').css('left', 21);
    $(ele).find('.sliderContent').css('top', $(ele).offset().top - 38  );
    $(ele).find('.sliderContent').slideDown(400, function () {});
    return false;
}

function saveFileToFolder(ele) {
    var shortUrl = $(ele).closest('.sliderContent').children('.shortUrlHidden').val();
    var folderId = $(ele).val();
    var request = $.ajax({
        url: "http://chillingsafe.com/folder_update.ajax.php",
        type: "POST",
        data: {
            shortUrl: shortUrl,
            folderId: folderId
        },
        dataType: "html"
    });
}
*/
function showAdditionalOptions() {
    if ($('#additionalOptionsWrapper').is(":visible")) {
        $('#additionalOptionsWrapper').slideUp();
    } else {
        $('#additionalOptionsWrapper').slideDown();
    }
}
/* Never used.
function saveAdditionalOptions() {
    fileToEmail = $('#send_via_email').val();
    filePassword = $('#set_password').val();
    processAddtionalOptions();
    showAdditionalOptions();
}
function processAddtionalOptions() {
    if (uploadComplete === false) {
        return false;
    }
    return sendAdditionalOptions();
}
*/
function sendAdditionalOptions() {
    if (fileDeleteHashes.length === 0) {
        return false;
    }
    if ((fileToEmail.length === 0) && (filePassword.length === 0)) {
        return false;
    }
    $.ajax({
        type: "POST",
        url: "http://chillingsafe.com/file_options.ajax.php",
        data: {
            fileToEmail: fileToEmail,
            filePassword: filePassword,
            fileDeleteHashes: fileDeleteHashes,
            fileShortUrls: fileShortUrls
        }
    }).done(function (/* msg */) {
        fileToEmail = '';
        filePassword = '';
    });
}


$(document).ready(function () {
    'use strict';
    /* global updateTotalFilesText, setRowClasses */
    var totalRows;

    $('#fileUpload #fileupload').fileupload({
        sequentialUploads: true,
        url: 'http://chillingsafe.com/upload_handler.php?r=chillingsafe.com&p=http',
        maxFileSize: 268435456 ,
        formData: {
            _sessionid: 'bfeadc6536fe586b347e4c18ced14482'
        },
        xhrFields: {
            withCredentials: true
        },
        maxNumberOfFiles: 100})
        .on('fileuploadadd', function (/* e, data */) {
            $('#fileUpload #fileupload #fileListingWrapper').removeClass('hidden');
            $('#fileUpload #fileupload #initialUploadSection').addClass('hidden');
            $('#fileUpload #fileUploadBadge').addClass('hidden');
            getTotalRows();
            totalRows = getTotalRows() + 1;
            updateTotalFilesText(totalRows);
        })
        .on('fileuploadstart', function (/* e, data */) {
            $('#fileUpload #addFileRow').addClass('hidden');
            $('#fileUpload #processQueueSection').addClass('hidden');
            $('#fileUpload #processingQueueSection').removeClass('hidden');
            $('#fileUpload .cancel').html('<img src="http://cdn.chillingsafe.com/images/pixel.png" style="margin:10px" id="upload-uploading"  />');
            startTime = (new Date()).getTime();
        })
        .on('fileuploadstop', function (e, data) {
            updateTitleWithProgress(100);
            updateProgessText(100, data.total, data.total);
            $('#fileUpload #processQueueSection').addClass('hidden');
            $('#fileUpload #processingQueueSection').addClass('hidden');
            $('#fileUpload #completedSection').removeClass('hidden');
            $('#fileUpload .processingIcon').parent().html('<img src="http://cdn.chillingsafe.com/images/red_error_small.png" width="16" height="16"/>');
            uploadComplete = true;
            sendAdditionalOptions();
            setupCopyAllLink();
        })
        .on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
            updateTitleWithProgress(progress);
            updateProgessText(progress, data.loaded, data.total);
        })
        .on('fileuploaddone', function (e, data) {
            fileUrls.push(data['result'][0]['url']);
            fileDeleteHashes.push(data['result'][0]['delete_hash']);
            fileShortUrls.push(data['result'][0]['short_url']);
            var isSuccess = true;
            if (data['result'][0]['error'] !== null) {
                isSuccess = false;
            }
            var html = '';
            html += '<tr class="template-download';
            if (isSuccess === false) {
                html += ' errorText';
            }
            html += '" ';
            if (isSuccess === true) {
                html += 'onClick=""';
            }
            html += '>';
            if (isSuccess === true) {
                html += data['result'][0]['success_result_html'];
            } else {
                html += data['result'][0]['error_result_html'];
            }
            html += '</tr>';
            $(data['context'])
            .replaceWith(html);
        })
        .on('fileuploadfail', function (e, data) {
            $(data['context']).find('.name')
            .html('There was a server problem while attempting the upload, please try again later.');
            totalRows = getTotalRows();
            if (totalRows > 0) {
                totalRows = totalRows - 1;
            }
            updateTotalFilesText(totalRows);
        });
        $('#fileUpload #fileupload #files a:not([target^=_blank])').on('click', function (e) {
            e.preventDefault();
            $('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
        });
        $('.showAdditionalOptionsLink').click(function (e) {
            showAdditionalOptions();
            e.preventDefault();
            return false;
        });
});
$(function () {
    $("#tabs").tabs();
    $("#tabs").mouseover(function () {
        $("#tabs").addClass("tabsHover");
    });
    $("#tabs").mouseout(function () {
        $("#tabs").removeClass("tabsHover");
    });
});
/* ============================================================================ */
/* ============================================================================ */
function findUrls(text) {
    var source = (text || '').toString();
    var urlArray = [];
    // var url; Never Used
    var matchArray;
    var regexToken = /(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)|((mailto:)?[_.\w-]+@([\w][\w\-]+\.)+[a-zA-Z]{2,3})/g;
    while ((matchArray = regexToken.exec(source)) !== null) {
        var token = matchArray[0];
        urlArray.push(token);
    }
    return urlArray;
}
/* NOTE:!!!!! Never used  */
function urlUploadFiles() {
    var urlList = $('#urlList').val();
    if (urlList.length === 0) {
        alert('Please enter the urls to start.');
        return false;
    }
    urlList = findUrls(urlList);
    if (urlList.length === 0) {
        alert('No valid urls found, please make sure any start with http or https andtry again.');
        return false;
    }
    if (urlList.length > 5 ) {
        alert('You can not add more than[[[MAX_URLS]]] urls at once.');
        return false;
    }
    var html = '';
    var i;
    for (i = 0; i < urlList.length; ++i) {
        html += '<tr id="rowId' + i + '"><td class="cancel"><a href="#" onClick="return false;"><img src="http://cdn.chillingsafe.com/images/processing_small.gif" class="processingIcon" height="16" width="16" />';
        html += '</a></td><td class="name" colspan="3">' + urlList[i] + '</td></tr>';
    }
    $('#urlUpload #urls').html(html);
    $('#urlUpload #urlFileListingWrapper').removeClass('hidden');
    $('#urlUpload #urlFileUploader').addClass('hidden');
    $('#urlUpload #fileUploadBadge').addClass('hidden');
    function doRequest(url, i) {
        var request = $.ajax({
            url: "http://chillingsafe.com/upload_url",
            type: "POST",
            data: {
                url: url,
                rowId: i
            },
            dataType: "json",
            ysrowId: i,
            xhrFields: {
                withCredentials: true
            }
        });
        request.done(function (data) {
            var isSuccess = true;
            if (data.error !== null) {
                isSuccess = false;
            }
            var html = '';
            html += '<tr class="template-download';
            if (isSuccess === false) {
                html += ' errorText';
            }
            html += '" onClick="">';
            if (isSuccess === false) {
                html += data.error_result_html;
            } else {
                html += data.success_result_html;
                fileUrls.push(data.url);
                fileDeleteHashes.push(data.delete_hash);
                fileShortUrls.push(data.short_url);
            }
            html += '</tr>';
            $('#rowId' + data.rowId).replaceWith(html);
            if (i == urlList.length - 1) {
                $('#urlUpload .fileSectionFooterText').removeClass('hidden');
                sendAdditionalOptions();
                setupCopyAllLink();
            }
        });
        request.fail(function(/*jqXHR, textStatus*/) {
            $('#rowId' + this.ysrowId + ' .cancel .processingIcon').attr('src', 'http://cdn.chillingsafe.com/images/red_error_small.png');
            $('#rowId' + this.ysrowId + ' .name').html(urlList[this.ysrowId] + ' (Failed to request file, possible ajax issue)');
        });

    }
    for (i = 0; i < urlList.length; ++i) {
        doRequest(urlList[i], i);
    }
}
/* ============================================================================ */
/* ============================================================================ */
function CheckTables() {
    $("table ").each(function (/*index*/) {
        $(this).find('tbody:not(:empty)').parent().show();
        $(this).find('tbody:empty').parent().hide();
    });
}
setInterval(CheckTables, 100);
/* ============================================================================ */
/* ============================================================================ */
/* ============================================================================ */