Upload Files

Una de las funciones que teníamos pendientes en nuestro servidor era la capacidad de subir ficheros y ya lo tenemos 😊.

La manera de subir los ficheros es un proceso un poco diferente a los demás, ya que lo forman  2 acciones:

1.- Elegir fichero/s

2.- Subir y procesar los ficheros subidos 

Los ficheros que se suban al servidor van a parar a una carpeta temporal de nuestro sistema, por defecto será ./tmp. Esta carpeta es gestionada automáticamente por nuestro servidor que se encargará de mantener e ir borrando los ficheros a partir de un máximo de tamaño de la carpeta, por lo que no nos deberemos preocuparnos de nada. 

Estos ficheros una vez se suben y están en la carpeta temporal, deberemos procesarlos y meterlos donde queramos: moverlos, copiarlos, insertarlos en registros blob,...

A nivel de la Api que estamos diseñando para las pantallas, la codificación es similar a los otros controles. 

Proceso 1

La manera html de indicar que muestre un button para seleccionar fichero sera:

<input type="file" multiple id="basic-file" name="file" />

- Type será = 'file' y el tag multiple si queremos dejar seleccionar varios ficheros

- El id como los otros controles tendrá el nombre del id del dialogo + '-' + nombre del id 

Proceso 2

Para la segunda función, el button para ejecutar la subida, la codificación será la siguiente

<input type="button" id="basic-upload" class="button" data-onclick="fileupload" data-upload="basic-file" value="Upload via API Httpd2">

- El id que será codificado de la misma manera que todos los demás.

- data-onclick que tendrá el nombre del proceso a ejecutar de nuestra api

- data-upload que tendrá el nombre del id del control que selecciona los ficheros, en este caso basic-file

Como se puede observar todo sigue la misma manera de codificar que los otros controles. Recordad que esta es la parte html, nativa y que la idea es que este código lo produzca otro sistema para diseñar las pantallas. 

Una vez estemos en nuestra api, como siempre se tratará de diseñar nuestro proceso, que se encargará de recuperar la información de los ficheros don el metodo del objeto oDom:Files() 

Este método devuelve un array del fichero/s que se han subido. Este array tendrá la siguiente estructura: 

'Content-type': MIME del fichero

'success'         : File upload .t./.f.

'error' : message error

'filename'         : Nombre del fichero

'ext' : Extension del fichero

'size' : Tamaño del fichero

'tmp_name' : Nombre del fichero temporal ubicado en /.tmp

Si creamos una salida a consola -> _d( aFiles ) veremos el contenido

Asi un ejemplo básico de un proceso podria ser este:

function web_upload( oDom )

do case

case oDom:GetProc() == 'fileupload' ; FileUpload( oDom )

otherwise

oDom:SetError( "Proc don't defined => " + oDom:GetProc() )

endcase

retu oDom:Send()

static function FileUpload( oDom )

local hPost := oDom:GetAll()

local aFiles := oDom:Files()

        //    Procesamos los ficheros que se han subido

        //    Creamos una respuesta a nuestro sistema. En este caso devuelvo los datos enviado al server

oDom:Console( { 'post' => hPost, 'files' => aFiles } )

oDom:SetAlert( 'FileUpload done!. Check console' )

retu nil 

Y esto es todo !  

Vamos a ver si nos funciona bien, chequearlo y dejarlo ya como una de las partes funcionales de nuestro httpd2. Se ha insertado el tratamiento "multipart/form-data" para poder gestionar el body del envio. En cada subida se enviará los ficheros y datos de nuestro formulario !