Contenido

Firefox3 integra opción nativa para gestionar la subida de ficheros

8 Jul

+ 3

Una de las nuevas funcionalidades de Firefox3 es la extensión de los elementos <input type="file" /> que nos permite utilizarlos previamente antes de subirlos a nuestro servidor mediante Javascript.

firefox3_files

Como podemos ver en Firebug, vemos que los elementos <input /> incorporan una propiedad DOM extra llamada files, que se compone de un array de elementos ordenados que hacen referencia a los ficheros subidos mediante ese elemento.

Esta propiedad, dispone de 3 métodos con las que podremos hacer uso de los elementos que subamos:

  • Atributos : fileSize y fileName
  • Métodos: getAsDataURL, getAsBinary y getAsText

Ejemplo de uso

function writeText() {
    var data = $('text').files.item(0).getAsBinary();
    $('result').update(data);
    $('textsize').update($('text').files.item(0).fileSize);
}
function writeImage() {
  var data = $('image').files.item(0).getAsDataURL();
  $('imageresult').src = 'data:' + data;
  $('imagesize').update($('image').files.item(0).fileSize);
}
  • Buf,… y vaya quebraderos de cabeza puede traer esta nueva opcion nativa que quita compatibilidad con versiones anteriores…

    Si, añade estos metodos y atributos a los elementos de tipo file y se pueden hacer cosas interesantes como visualizar el contenido del fichero antes de subirlo (no mas hacks de iframes), pero impide, por razones de confindencialidad, la posibilidad de acceder al atributo value , lo cual a su vez, impide que podamos acceder a la localizacion del fichero…

    Supongo que firmando correctamente el script (
    http://www.mozilla.org/projects/security/components/signed-scripts.html ), se puede acceder correctamente a los elementos «prohibidos»… De momento, y para salir del paso rapidamente, si se añade

    netscape.security.PrivilegeManager.enablePrivilege(«UniversalFileRead») antes de acceder al value de elemento ( y netscape.security.PrivilegeManager.revertPrivilege(«UniversalFileRead») despues del mismo, para mantener el estado inicial )

    y cambiando la propiedad del navegador signed.applets.codebase_principal_support a true ( about:config + signed.applets.codebase_principal_support=true);

    Asi.. en plan un poco chapu….y para mantener la compatibilidad de codigo (y con prototype)

    if (navigator.userAgent.indexOf(‘Firefox/3.’)>-1) {
    try {
    netscape.security.PrivilegeManager.enablePrivilege(«UniversalFileRead»);
    path_filename = $F(‘myFile’);
    netscape.security.PrivilegeManager.revertPrivilege(«UniversalFileRead»);
    }
    catch (err) {
    alert(«Tienes que dar permisos en about:config … Error [» +err+ «]»);
    }
    }
    else
    path_filename = $F(‘myFile’);

  • Espectacular función
    ahora podremos chequear el tamaño de las imagenes antes de subirlas. O una cabecera de tipo CSV determinada desde el cliente sin tener que esperar que llegue el archivo al server para realizar la verificación (que siempre tendremos que hacer de todas maneras).

    una vez cargado el archivo en el browser podemos saber el tamaño con $(‘imageresult’).width y $(‘imageresult’).height

    donde imageresult es el id de la imagen cargada.

    realmente increible, ahora sólo falta que pongan un progress bar para los formularios de upload nativo en el navegador y estamos hechos.,

  • Interesantísimo para variar.
    Por fín no habrá que tragarse toda la subida del archivo para que el server te devuelva un error de tipo de archivo. Bueno para el usuario, bueno para el programador ^^

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.