Actualización de Medidor de progreso de subida de archivos en Ajax

Este artículo es la traducción del este PHP AJAX File Upload Progress Meter Updates

Durante el fin de semana mi código de medidor de subida de archivos tuvo mucho tráfico. Parece que está en la lista de populares de del.icio.us y tambien está obteniendo un montón de votos en digg. Para celebrar esto actualicé el código.
La nueva característica mas importante es que devuelve información sin tener que parchear PHP. Ahora la versión parcheada te da mas información como velocidad de subida y tiempo estimado de finalización. Pero igual damos devolución al usuario sin usarlo.
También creé algunas páginas wiki para empezar el proceso de documentación
Acá están los demos:
Con el Parche y la extensión
Sin el parche
Para tener la velocidad de subida vas a necesitar descargar e instalar el parche y extensión PHP Upload Progress.

Si queres usar el codigo necesitas:
Instalar HTML_AJAX (pear install HTML_AJAX-alpha)
Descargar PAFUPMU e instalarlo en algún lugar accesible.
Agregar el código a tu página usando demo.php como un ejemplo.

La forma básica en que trabaja el código es: tomamos un formulario que contiene una subida de archivo y un aceptar con un objetivo (target) en un iframe oculto. Hacer esto permite que la subida pase en el fondo. Entonces consultamos al servidor en lapsos regulares (digamos intervalos de 2 segundos) preguntando para actualizar el estado. Si tenés el parche+extensión instalado te da la velocidad de subida del archivo, etc. Si no tenés la extensión paramos de hacer llamadas AJAX y solo animamos la barra de estado hasta que la subida termine en el iframe y nos diga que terminamos.
En demo.php nos encargamos de generar la página vigente y manejamos la subida en la misma página. Entonces empezamos gestionado la actualización.

<?php
include ‘UploadProgressMeter.class.php’;
$fileWidget = new UploadProgressMeter();
if ($fileWidget->uploadComplete()) {
// output javascript to the iframe to send a final status to the main window
// this will catch error conditions
echo $fileWidget->finalStatus();
// move the file(s) where they need to go
exit;
}
?>

Este código solo funciona cuando estas subiendo por eso no veras nunca una salida de este. Esto puede hacer problemático el seguimiento de errores. Por otro lado esto se puede resolver haciendo el iframe no oculto.
Luego montas el Javascript necesario, primero HTML_AJAX y después los subidores JS.

<script type=’text/javascript’ src=’demoserver.php?client=main,request,httpclient,dispatcher,json,util’></script>
<script type=’text/javascript’ src=’demoserver.php?stub=UploadProgressMeterStatus’></script>
<?php echo $fileWidget->renderIncludeJs(); ?>

demoserver.php está incluido en la fuente, puede ser que quieras nombrarlo de otra manera si realmente usas este código.Es solo una página usando HTML_AJAX_Server para registrar la clase UploadProgressMeterStatus.
También necesitás algo de CSS para darle estilo a la barra de progreso. Lo único importante es que .progressBar y . progressBar.bar estén posicionadas relativamente.

.progressBar {
position: relative;
padding: 2px;
width: 300px;
height: 40px;
font-size: 14px;
}
.progressBar .background {
border: solid 1px black;
width: 270px;
height: 20px;
}
.progressBar .bar {
position: relative;
background-color: blue;
width: 0px;
height: 20px;
}

Finalmente termina las cosas construyendo un formulario. Fijate que podés incluir otros elementos en el formulario, pero si necesitan producir una salida vas a tenés que manejar rellamadas en la pagina padre desde la salida del iframe.

<form action="demo.php" enctype="multipart/form-data" method="post" <?php echo $fileWidget->renderFormExtra(); ?>>
<?php echo $fileWidget->renderHidden(); ?>
<label>Select File: render(); ?>
< ?php echo $fileWidget->renderProgressBar(); ?>
</div>
</form>