Rails and ajax file upload - cannot read property 'innerHTML' of null error

This is old but I found an actual solution to this. Change your require in application.js to //=require jquery-fileupload/basic instead of //= require jquery-fileupload.

The reason you're getting this error is because you are missing a script tag id="template-upload" or id="template-download" or both.

Example from the Demo at: http://blueimp.github.com/jQuery-File-Upload/

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>

The UI version depends on both these templates being present.

I was having the same problem and decided to checkout what was missing.

Hope that helps.

I ran into this same problem as well. However, loading the basic version of the file-upload plugin was not an option for me since I use previewing for one upload, but not for the other. You can disable the "preview" functionality and the attempted processing of template-upload and template-download on a case-by-case basis by setting the uploadTemplateId and downloadTemplateId options for the file-upload plugin to null.

The error message tells us that document.getElementById(id) is returning null, so there is no element currently in the document with the specified id.

To debug, try adding a call to console.log(id); before the return statement. Once you do that you can find the value of id that is causing the problem. Hopefully the error is the result of a simple typo, remember the value of id is case-sensitive. If a typo is not the problem, you can at least set a conditional breakpoint since you now know the value of id that you want to break on. After hitting the breakpoint, it's just a matter of stepping through to the calling functions to "see which piece of code triggers that function." Hope this helps.

I'm using this plugin for a few month, today i noticed that file upload didn't work, and i get an error

"cannot read property 'innerHTML' of null error".

I looked into it, and its because a simple reason. the file path

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js

changed to

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js

in the git of blueimp. as you could see here

https://github.com/blueimp/jQuery-File-Upload

the path changed in this file.

https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html

I changed to the right path and its works. hope this answer will help someone here that got same problem.