I am developing a Rails app with a module for dynamic - ajax - image upload to gallery. I am doing it basing on this app - multi-file-upload-demo. I am not very keen in Javascript and stuff, so I copy a lot of logic from that implementation.
I made up my app following all logic from rounders demo, I have included all gems and javascript libraries, and I get an error:
Uncaught TypeError: Cannot read property 'innerHTML' of null
in chrome console, which refers to tmpl.js file
tmpl.load = function (id) {
return document.getElementById(id).innerHTML;
};
My knowledge of JS doesn't make it clear to me which piece of code triggers that function so I can go further.
Can you advise me what are the next steps to investigate source of this problem? I expect potential reasons may be various, so I don't want to paste all code from the application.
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.
