Msgstr "Unable to read innerhtml null property."

Question

I am using jQueryFileUpload. I have an html that looks like this:

<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');
        }
      }
    }
});

Now I get the error message:

Uncaught TypeError: Cannot read property 'innerHTML' of null

in tmpl.js, which comes with a jQuery file download. He says the error is on the line, where does the progress function begin?

Thanks for the help!

Answer 1

In the tmpl.js file, it looks for the identifier here:

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

If it returns NULL, it means that you are not defining the variable "id" anywhere ...

, (tmpl.js) script ; , : https://github.com/blueimp/jQuery-File-Upload