Upload de archivos con el componente W3 Upload

Usando el componente de la empresa Dimac (puede descargar una versión de evaluación desde tech.dimac.net) construiremos una solución para permitir a sus visitantes realizar upload de sus archivos sin necesidad de utilizar FTP, ni escribir extensos códigos en ASP.

El componente W3 Upload, nos permite controlar que tipos de archivos pueden subirse, de que tamaño, en que carpeta guardarlos y opciones más avanzadas como guardar archivos en bases de datos.

Desarrollaremos un ejemplo con dos páginas, un formulario para seleccionar el archivo, formulario.htm y una página asp que realizará el proceso de upload, upload.asp

Formulario

Creamos un formulario con los siguientes campos:

  • Carpeta: Es la carpeta de trabajo del usuario, donde se guardaran los archivos
  • Mensaje: además de enviar el archivo, el usuario podrá enviar un mensaje que guardaremos en un archivo de texto.
  • Archivo: desde aquí el usuario seleccionará el archivo a enviar.
Código del formulario

<form method="POST" action="upload.asp" enctype="multipart/form-data">
Carpeta : <input type="text" name="carpeta" size="20" maxlength="20"><p>
Mensaje : <textarea rows="3" name="mensaje" cols="34"></textarea><p>
Archivo : <input type="file" name="archivo"><p>
<input type="submit" value="Enviar" name="Btnsubmit">
</form>

Quizás haya algunos elementos de este formulario que sean nuevos para Ud. Por un lado, debe indicar el tipo de codificación del formulario como "multipart/form_data", lo que habilitará el envío de un archivo. En segundo lugar, aparece un campo de formulario de tipo "file", el cual mostrará un cuadro de texto y un botón "examinar".

Upload.asp

En el server deberemos tener una carpeta con los permisos correspondientes. Por ejemplo c:uploads. Dentro de esa carpeta, los usuarios podrán crear sus subcarpetas de trabajo. El archivo adjunto y el mensaje enviado por el usuario se guardaran allí.

Comenzaremos creando una instancia del objeto:

<%
Set upload = Server.CreateObject("W3.Upload")
%> 

De ahora en adelante, cuando hagamos referencia a los campos de formulario, lo haremos con el objeto upload y no con response. Esto es muy importante ya que de lo contrario perderemos el archivo enviado.

Verificaremos si existe la carpeta de trabajo, y de no ser así la crearemos. Para esto utilizaremos el objeto FileSystemObject.

<%
Set fsys = CreateObject("Scripting.FileSystemObject")
%> 

"Limpiamos" la cadena ingresada por el usuario:

<%
carpeta=upload.form("carpeta")
carpeta=replace(carpeta,"."," ")
carpeta=replace(carpeta,">"," ")
carpeta=replace(carpeta,"<"," ")
carpeta=replace(carpeta,"/"," ")
carpeta=replace(carpeta,""," ")
carpeta=replace(carpeta,":"," ")
carpeta=replace(carpeta,"?"," ")
carpeta=replace(carpeta,"*"," ")
carpeta=replace(carpeta,chr(34)," ")
carpeta=replace(carpeta,"'"," ")
carpeta=trim(carpeta)
%> 

Con FolderExists comprobamos si existe una carpeta; para crear una nueva usamos CreateFolder

<%
if not fsys.FolderExists("c:uploads" & carpeta) then
   fs.CreateFolder "c:uploads" & carpeta
End if
%> 

Ya tenemos la carpeta de trabajo, ahora guardaremos en un archivo de texto el mensaje ingresado por el usuario. El nombre del archivo será del tipo:

mensaje_151100_031108pm.txt (esto es mensaje_fecha_hora)

Guardar el archivo

<%
strmensaje=trim(upload.form("mensaje"))

if strmensaje<>"" then

    fecha=replace(date,"/","")
    hora=replace(time,":","")
    hora=replace(hora,".","")
    hora=replace(hora," ","")

    archivotexto = "c:uploads" & carpeta & "mensaje_" & fecha & "_"
    archivotexto = archivotexto & hora & ".txt"

    set a = fsys.CreateTextFile(archivotexto,true) 

    a.writeline(strmensaje)
    a.close
    set a=nothing

end if
%>

Ya no necesitamos el objeto fsys:

<%
set fsys = nothing
%> 

Bueno, al fin empezamos a trabajar con nuestro objeto upload. En primer lugar, vamos a filtrar archivos que no queremos que los usuarios envíen. En este ejemplo, no se pueden enviar archivos de mas de 4 mb. ni aquellos con extensión "exe" o "vbs".

Aplicación de filtros

<%
Set elarchivo = upload.Form("archivo")

if elarchivo.size>4194000 then  'tamaño en bytes
   response.write "El archivo es demasiado grande para ser enviado.<p>"
   response.write "<a href='javascript:history.back()'>Regresar</a>"
   exit sub
end if

if instr(elarchivo.filename,".")<>0 then 
   extension=mid(elarchivo.filename,instr(elarchivo.filename,"."))
   if trim(extension)=".exe" or trim(extension)=".vbs" then
      response.write "Imposible enviar ese tipo de archivo.<p>"
      response.write "<a href='javascript:history.back()'>Regresar</a>"
      exit sub
   end if
end if
%>

Como podrá observar, utilizo "exit sub" para forzar la salida de la sub que se está ejecutando. Asumo por lo tanto que Ud. trabajará con Subs al construir la página asp (y si no es así, es una buena oportunidad para empezar a hacerlo)

Solo nos resta guardar el archivo en la carpeta de trabajo con el método SaveToFile

pendiente

<%
if elarchivo.IsFile then 
   strsave="c:produccion" & carpeta & "" & elarchivo.filename
   elarchivo.SaveToFile(strsave) 
end if 

response.write "Se envio el archivo : " & elarchivo.filename
response.write "<br>Tamaño : " & elarchivo.size 
%>

Mejorando el proceso

Hay varias cosas que Ud. puede hacer para mejorar la solución que construimos:

  • Combinar el componente upload con el W3 JMail para construir una completa solución de correo con attachments.
  • Habilitar el envío de múltiples archivos (recorriendo la colección form)
  • Puede evitar que los archivos se sobreescriban, cuando el cliente envía un archivo con un nombre ya existente. Solo debe cambiar el método SaveToFile por SaveAsUniqueFile. Así, por ejemplo, se guardará un archivo como file(1).txt si ya existe file.txt.

El upload, como podrá apreciar, es un proceso relativamente sencillo, y en general no será muy distinto si Ud. decide usar otros componentes. Las propiedades y los métodos descriptos, existen para la mayoría de los componentes disponibles y puede ahorrar con ellos unas cuantas horas de programación.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.