jueves, 9 de abril de 2009

Upload File with Dojo and PHP

Durante una búsqueda exhaustiva de como poder subir archivos con Dojo ToolKit encontré demasiadas soluciones pero ninguna de estás me daban una buena solución.

Por tanto me me clave en el Dojo Book y el en Dojo Api y encontré la solución perfecta para poder trabajarlo con PHP 5.2.4.

El primer paso es hacer requerir el paquete: 

dojo.require("dojo.io.iframe");

Después podemos tener un HTML bastante sencillo. Este HTML debe contener un form que contenga la entrada del archivo, para eso utilizamos la siguiente tag:



<input type="file" id="archivo" name="archivo" onkeydown="javascript:return false;">


Si bien notamos esta entrada no es un widget de Dijit. Si no que es un input HTML.


Ahora solo falta el boton de enviar.


<input type="button" value="Enviar" onclick="javascript:envia();">


Todo esto debe quedar bien dentro del form.

Del lado del script usamos la funcion:



function envia(){
dojo.io.iframe.send({
form:dojo.byId("myform"),
content:{
otraVar:"una string"
},
  handleAs:"json",
handle:function(ioResponse,args){
   if(ioResponse instanceof Error){
    console.log("Error: "+ioResponse);
   }
   else{
    console.log("Respuesta: "+ioResponse);
   }
  }
});
}


Usamos la función dojo.io.iframe.send, esta envía datos hacia una URL, el handle es la función que se ejecuta cuando hubo una respuesta para verificar si es correcta se hace uso del else, el error es la se encuentra en el if y por último el content es un JSON de variables que puede mandar por separado del formulario.

La parte más importante es el handleAs ya que este especifica como debe manejar los datos que se obtienen como respuesta. Pueden ser XML, Texto Plano, JSON, JS y HTML. Esta respuesta será buscada dentro de un elemento HTML textarea que se vera más adelante.

El resultado final tendremos:(omitimos las secciones vistas)




<html>
<head>
<title>mi upload</title>
<meta http-equiv="Content-Type" content="text/html;">
<script>
    dojo.require("dojo.io.iframe");
    function envia(){
        //codigo de funcion.
     }
</script>
</head>
<body>
<form  id="archivo" ENCTYPE="multipart/form-data" method="POST" >
<!--inputs-->
</form>
</body>
</html>




Nota: no olvide poner los script fundamentales para Dojo y sus recursos.

El url en la función lo podemos evitar ya que dentro del form se puede hacer uso del action, otro campo que también podemos omitir es el método de envió de datos, por lo regular en la función debemos hacer explícitamente del método pero en este caso esta por default el POST si es que no lo definimos en el tag del formulario. Ya que tenemos la función que se encargara de enviar todo el formulario ahora hace falta el script del servidor. 

Para el servidor usamos PHP la versión 5.2.4 que funciona, si no excelentemente, se puede decir que de manera regular.

Para poder recibir el archivo y todas las variables enviadas se manejan de manera tradicional.


<?php
if(is_uploaded_file($_FILES['archivo']['tmp_name'])){
move_uploaded_file($_FILES['archivo']['tmp_name'], getcwd()."/users/".$_FILES['archivo']['name']);
     print(c_men("Archivo cargado mas la variable otraVar:".$_POST['otraVar']));
}
else{
    
print(c_men("Error al subir archivo"));
}


function c_men(){
    $una='<html><head></head><body><textarea style="width: 100%; height: 100px;">';
    $una.=$mensaje;
    $una.='</textarea></body></html>';
    return $una;

}

?>


De esta manera podemos hacer que Dojo realice la carga de archivos a un sitio en desarrollo. Si observamos en le funcion move_uploaded_file tenermo dos parámetros, yo uso una carpeta que se llama users que debe tener permisos de escritura para el grupo de otros ademas de usar la función para obtener todo el path del script que se esta ejecutando.

1 comentario:

Deja tu huella aquíGracias!!!