Notas de actualización:
Si bien este artículo se vio ya superado por nuevas tecnologías, queda como una buena referencia de aprendizaje. Si estás buscando un control ya hecho, con buenas funcionalidades, recomiendo que busques las referencias al final del artículo.
La Web 2.0 permitió a los usuarios de internet interactuar bases de datos y archivos y procesos del servidor, lo que dió lugar a los sitios dinámicos que se alimentan con información de los usuarios. Un control interesante en ASP:NET que permite esto es el control FileUpload para subir archivos desde la máquina del usuario al servidor sin necesidad de usar FTP. Con este tipo de controles, compartir fotos en la red y otro tipo de archivos se transformó en un juego de niños.
Sin embargo, el control que viene con Visual Studio permite subir un archivo por cada control que se incluya, lo que limita la cantidad de archivos a la cantidad de controles incluidos en la página. Una opción es preguntarle al usuario cuántos archivos quiere subir para que podamos crear dinámicamente la cantidad de controles que necesitemos, pero a veces este procedimiento es un tanto molesto.
Inspirándome en este artículo decidí construir este control web (Web User Control) que aquí publico, el que permite agregar dinámicamente la cantidad de archivos a subir a medida que los vamos eligiendo. El secreto se basa en ir agregando los controles desde JavaScript, para evitar perder los archivos que se fueron cargados con algún eventual Postback producido por algún otro evento de la página.
Este control dista bastante de esos como los que usa Google o Facebook, donde se pueden seleccionar todos archivos de un saque, pero es bastante simple y práctico. Aquí está disponible el código fuente, por lo que cada uno pude hacerle las mejoras que requiera para su proyecto. Por otro lado, tampoco es asincrónico. Para eso recomiendo hacer algo con el control Ajax AsyncFileUpload.
Volviendo a lo nuestro, así se ve el control en Internet Explorer 8 y Opera 11 , con la hoja de estilos CSS adjunta. Con Firefox se ve bastante parecido a esto también.
Chrome y Safari muestran el control FileUpload de otra forma, por lo que habrá que modificar los estilos correspondientes si se quiere cambiar el aspecto.
Propiedad | Descripción | Valor default |
Titulo | Título a mostrar en el control. Para no mostrar nada, establecerlo en string.empty. | Si no se establece esta propiedad, se muestra "Archivos a subir". |
Comment | Una nota depués del título. |
string.empty
|
DestinationFolder | Carpeta donde se guardarán los archivos en el servidor. Si no existe, puede ser creada. Se establece el path relativo y no el físico. Para que la carpeta sea creada en el servidor, el usuario de internet debe tener premisos de escritura. Esta propiedad es obligatoria. |
-
|
UploadButtonIsVisible | Muestra el botón de "Subir archivos" dentro del control. Sirve para subir los archivos de forma independiente al resto de las acciones de la página. Si se quiere realizar otras acciones antes de subir los archivos se puede dejar este botón no visible y llamar manualmente al evento UploadFiles(CreateDir). |
false (no visible)
|
FileExtensionsEnabled | Limita los archivos a subir a las extensiones aquí definidas. Las extensiones se deben establecer separadas por "|" (pipe). Ej: ".txt|.jpg|.gif". Si no se establece esta propiedad, cualquier extensión es admitida. |
null
|
HasFile | Solo lectura. Indica si el control tiene al menos el primer archivo seleccionado. |
false
|
MaxFilesLimit | Cantidad máxima de archivos que el usuario puede agregar. Si se establece en cero, funciona igual que el control estándar FileUpload (solo deja subir un archivo). Si esta propiedad no se establece no limita la cantidad de archivos a agregar. |
null
|
MaxUploadSize | Límite en bytes de la tranferencia de todos los archivos a subir. Ver debajo más detalles sobre limitaciones. |
Hasta 4 MB
|
El control tiene solo un método:
Método | Descripción |
UploadFiles(bool CreateDir) | Realiza la subida de los todos los archivos seleccionados en el control. Si el parámetro CreateDir se establece en true, indica que el directodio destino definido en DestinationFolder debe crearse si no existe. |
Limitaciones:
- Por cuestiones de seguridad, de manera predeterminada con el control FileUpload se pueden subir de hasta 4 megabytes de una sola vez. Pasado ese límite se producirá un error "denial of service". Este control no captura ese error.
Sin embargo, tal como se explica en la especificación de la clase FileUlpload, se puede aumentar ese límite modificando el web.config de la aplicación. Por ejemplo para establecer el límite en 100MB, que deben ser subidos en menos de 15 minutos, se debe agregar <httpRuntime maxRequestLength="102400" executionTimeout="900"/> dentro de <system.web> del archivo web.config de nuestra aplicación web.
- El control está escrito en C#, por lo que los programadores de Visual Basic .Net deberán pasarlo. Se agradece el aporte de quien lo haga. Una página que puede ayudar a ésto es esta, que permite convertir C# en VBNet y viceversa. Funciona bastante bien.
- Solo se puede utilizar un control por página. Para utilizar varios en una misma página es necesario realizar modificaciones al código.
Uso simple:
El siguiente video explica como implementar el control de manera simple y rápida con Visual Studio 2010.
Download de archivos:
Desde aquí se puede bajar el código fuente del control con sus estilos para usarlo directamente.
Aquí hay un ejemplo de configuración y uso en un ejemplo para Visual Studio 2010.
- MultiFileUpload_VS2010example.rar (actualizado nov.2012 con función para mostrar los archivos subidos. Hacer Archivo > Descargar para bajar el proyecto completo ).
Conclusión:
Más allá de la utilidad de este control, en el código fuente se puede ver cómo manejar propiedades dentro de un Web User Control utilizando el StateBag ViewState, registrar código JavaScript en una página o en su Masterpage con RegisterStartupScript y hasta cómo usar básicamente expresiones regulares.
Espero sea de utilidad.
Actualización:
Para soluciones más concretas quizás quieras ver este control, que está hecho pensando en las posibilidades del javaScript sobre los navegadores más nuevos.
Actualización 2:
Con la evance y difusión de jQuery como standard, sin dudas el control que yo utilizaría es jQuery File Upload.
