"Cannot read property of innerhtml null " issue

Question

I'm using the jQueryFileUpload. I have html that looks like:

<input name='memoir[image]' type='file' data-url='memoirs/create' multiple="true" class='fileupload' />

<ul class='list'>
</ul>

and my jQuery:

$('.fileupload').fileupload({
    dataType: 'json',

    add: function (e, data) {
      var tpl = $('<li class="working"><div class="bar" style="width: 0%"></div><input type="text" value="0" data-width="48" data-height="48"'+
            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

      tpl.find('p').text(data.files[0].name);
      data.context = tpl.appendTo($(this).next($(".list")));


      types = /(\.|\/)(gif|jpe?g|png)$/i;
      file = data.files[0];
      if (types.test(file.type) || types.test(file.name)) {
        alert("Added and validated");
        data.context = $(tmpl("template-upload", file));
        $('.fileupload').append(data.context);

        data.submit();
      } else {
        alert("#{file.name} is not a gif, jpeg, or png image file");
      }
    },
    progress: function (e, data) {
      if (data.context) {
        alert("In progress");
        progress = parseInt(data.loaded / data.total * 100, 10);
        data.context.find('.bar').css('width', progress + '%');
        if(progress == 100){
            data.context.removeClass('working');
        }
      }
    }
});

Right now, I'm getting the error:

Uncaught TypeError: Cannot read property 'innerHTML' of null

in the tmpl.js that comes with jQuery File Upload. It says the error is on the line where the progress function starts?

Thanks for all help!

Answer 1

In the tmpl.js file it's looking for an ID here:

tmpl.load = function (id) {
    return document.getElementById(id).innerHTML;
};

If it's returning NULL, that means you're not defining the variable "id" anywhere...

Unless I'm much mistaken, you don't need the templates-stuff (tmpl.js) for the basic fileupload script to work though; according to the developers, it's optional: https://github.com/blueimp/jQuery-File-Upload