javascript - form - Carga de archivos Rails y ajax: no se puede leer la propiedad ''innerHTML'' de error nulo

rails upload image

Question

Estoy desarrollando una aplicación Rails con un módulo para la carga dinámica de imágenes ajax a la galería. Lo estoy haciendo basándome en esta aplicación: multi-file-upload-demo . No estoy muy interesado en Javascript y eso, así que copio mucha lógica de esa implementación.

Hice mi aplicación siguiendo toda la lógica de los rounders, he incluido todas las bibliotecas de gemas y javascript y recibo un error:

Uncaught TypeError: Cannot read property ''innerHTML'' of null 

en la consola de Chrome, que se refiere al archivo tmpl.js

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

Mi conocimiento de JS no me deja en claro qué parte del código activa esa función para que pueda ir más lejos.

¿Me puede recomendar cuáles son los próximos pasos para investigar el origen de este problema? Espero que las posibles razones puedan ser diversas, por lo que no quiero pegar todo el código de la aplicación.

Answer 1

El mensaje de error nos dice que document.getElementById(id) devuelve un null , por lo que actualmente no hay ningún elemento en el documento con el id. especificado id.

Para depurar, intente agregar una llamada a console.log(id); antes de la declaración de return . Una vez que lo haga, puede encontrar el valor de id que está causando el problema. Esperemos que el error sea el resultado de un simple error tipográfico, recuerde que el valor de id mayúsculas y minúsculas. Si un error tipográfico no es el problema, al menos puede establecer un punto de interrupción condicional, ya que ahora sabe el valor de id que desea interrumpir. Después de llegar al punto de interrupción, solo es cuestión de pasar a las funciones de llamada para "ver qué pieza de código activa esa función". Espero que esto ayude.

Answer 2

Esto es viejo pero encontré una solución real a esto. Cambie su requerimiento en application.js a //=require jquery-fileupload/basic lugar de //= require jquery-fileupload .

Answer 3

Estoy usando este complemento por unos meses, hoy noté que la carga del archivo no funcionó y recibí un error.

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

Lo busqué, y es por una simple razón. la ruta del archivo

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

cambiado a

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

en el git de blueimp. como podías ver aquí

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

La ruta cambió en este archivo.

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

Cambié al camino correcto y sus obras. Espero que esta respuesta ayude a alguien aquí que tiene el mismo problema.

Answer 4

La razón por la que está recibiendo este error es porque le falta una etiqueta de script id = "carga de plantilla" o id = "descarga de plantilla" o ambas cosas.

Ejemplo de la demostración en: 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>

La versión de la interfaz de usuario depende de que estas dos plantillas estén presentes.

Estaba teniendo el mismo problema y decidí verificar lo que faltaba.

Espero que ayude.

Answer 5

Me encontré con este mismo problema también. Sin embargo, cargar la versión básica del complemento de carga de archivos no era una opción para mí, ya que uso la vista previa para una carga, pero no para la otra. Puede deshabilitar la funcionalidad de "vista previa" y el intento de procesamiento de template-upload template-download caso por caso configurando las opciones uploadTemplateId y downloadTemplateId para el complemento de carga de archivos en null .