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 es with jQuery File Upload. It says the error is on the line where the progress function starts?

Thanks for all help!

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 es with jQuery File Upload. It says the error is on the line where the progress function starts?

Thanks for all help!

• javascript
• jquery
• html
• file

• If you set a breakpoint at that line, what is the value of the element it is trying to read the innerHTML property from? My guess is it won't be an element at all (likely null). – m.casey Commented Jul 9, 2014 at 23:00

1 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./blueimp/jQuery-File-Upload