Cómo personalizar Cargar/Descargar Plantilla de Bluebum jQuery Carga de archivos

Question

Estoy tratando de usar la demostración jQuery File Upload. He buscado a través del wiki del motor de plantillas wiki &, pero no he podido encontrar una respuesta sobre cómo personalizar la plantilla Cargar/Descargar sin utilizar la etiqueta de la fila de la tabla. Cada vez que elimino/cambio la etiqueta de la fila de la tabla, no funciona.

A continuación, mi plantilla de carga personalizada y no funciona. No sé por qué, ¿podría alguien ayudarme?

uploadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<li class="span3"><div class="thumbnail template-upload">' + 
       '<div class="preview"><span></span></div>' + 
       '<div class="caption"><h5 class="name"></h5>' + 
       '<p class="size"></p>' + 
       (file.error ? '<div class="error" colspan="2"></div>' : 
         '<div><div class="progress">' + 
          '<div class="bar" style="width:0%;"></div></div></div>' + 
          '<div class="start"><button>Start</button></div>' 
       ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>'); 
      row.find('.name').text(file.name); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    }, 

Answer 1

De su análisis de los ejemplos y la demostración en vivo He creado este jsbin: http://jsbin.com/ivonow/1/

Es el código de la demostración. Saqué las plantillas jQuery en la parte inferior del html y agregué la función uploadTemplate desde arriba a las opciones que se pasaron al configurar el objeto fileupload.

También tuve que establecer uploadTemplateId y downloadTemplateId a null para que no se trate de cargar los valores por defecto: los

{ 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
} 

en el HTML, que se llevó a cabo la mesa que rodea a las plantillas de fila y añadir una UL, pero el estilo sigue siendo extraño.

Espero que esto ayude.

Answer 2

Bueno en primer lugar, cuando se quiere trabajar en la eliminación de una imagen que se ha cargado, usted tiene que trabajar en la plantilla -descarga y no plantilla de subida.

template-upload se utiliza para obtener una vista previa de lo que se cargará, y una vez cargado, vuelve a aparecer en la plantilla de descarga.

Por lo tanto, la plantilla que se sobrescribirá en su caso debe ser template-download. Hay un buen ejemplo de cómo hacerlo aquí: https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

NOTA 1: el nodo que se retira dynamicaly está dirigido por la clase CSS plantilla-descarga. Por lo tanto, debería intentar ubicar esa clase en una posición diferente dentro de su código (utilicé los divs y me funciona). La clase "fade" se usa para el efecto de transición.

SIN EMBARGO, parece que hay algunos errores en esta documentación (probablemente de una actualización del módulo que no se ha informado en el documento).

El siguiente extracto de código para volver a escribir la plantilla-descarga no funcionará

row.find('.delete') 
    .attr('data-type', file.delete_type) 
    .attr('data-url', file.delete_url); 

porque de archivo objeto no tiene ninguna delete_type ni delete_url parámetros, pero DeleteType y deleteUrl parámetros. Eso es para Jquery File Upload versión 8.9.0, tho '(la versión anterior podría funcionar).

Así que el botón eliminar no tendría los valores correctos si simplemente copia y no pega el código del documento, por lo tanto, tampoco funcionará.

El código correcto para hacer que el botón de borrar cuando overwritting la plantilla-descarga es

row.find('.delete') 
    .attr('data-type', file.deleteType) 
    .attr('data-url', file.deleteUrl); 

Para mí, el siguiente código funciona bien.

$('#fileupload').fileupload({ 
    downloadTemplateId: '', 
    downloadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<div class="template-download fade"><span class="preview"></span>' + 
       (file.error ? '<div class="error"></div>' : '') + 
       '<button class="delete">Delete</button></div>'); 
      //row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.name').text(file.name); 
       row.find('.error').text(file.error); 
      } else { 
       // row.find('.name').append($('<a></a>').text(file.name)); 
       if (file.thumbnailUrl) { 
        row.find('.preview').append(
         $('<a></a>').append(
          $('<img>').prop('src', file.thumbnailUrl) 
         ) 
        ); 
       } 
       row.find('a') 
        .attr('data-gallery', '') 
        .prop('href', file.url); 
       row.find('.delete') 
        .attr('data-type', file.deleteType) 
        .attr('data-url', file.deleteUrl); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    } 
});