La validación del tamaño de los archivos es crucial para prevenir la sobrecarga del servidor y optimizar el uso del almacenamiento. Una estrategia efectiva combina la validación en el lado del cliente (frontend) con una veirficación robusta en el lado del servidor (backend).
Validación en el Frontend con JavaScript
Se puede implementar una validación inicial utilizando JavaScript tan pronto como el usuario selecciona un archivo. Esto proporciona una retroalimentación instantánea, mejorando la experiencia del usuario.
Aquí tienes un ejemplo de cómo se podría configurar el formulario HTML y el script JavaScript asocidao:
<form method="post" action="FileUploadHandler.ashx" enctype="multipart/form-data">
Nombre: <input type="text" name="itemName" /><br />
Archivo: <input type="file" id="fileInput" name="selectedFile" accept=".jpg,.jpeg,.png" /><br />
<input type="submit" value="Subir" />
</form>
<script>
document.getElementById('fileInput').addEventListener('change', function() {
const MAX_FILE_SIZE_BYTES = 10 * 1024 * 1024; // 10MB
const file = this.files[0];
if (file && file.size > MAX_FILE_SIZE_BYTES) {
alert('El tamaño del archivo excede el máximo permitido de 10MB.');
this.value = ''; // Limpiar la selección del archivo
}
});
</script>
Procesamiento en el Backend con C# (ASP.NET Hendler)
Para garantizar la seguridad y la integridad, es indispensable realizar una validación en el backend. El siguiente código demuestra cómo manejar la carga de archivos y verificar su tamaño y tipo utilizando un manejador de ASP.NET.
using System;
using System.IO;
using System.Linq;
using System.Web;
namespace UploadApp.Handlers
{
/// <summary>
/// Manejador para el procesamiento de cargas de archivos.
/// Puntos clave para la carga:
/// (1) HTML del formulario: `enctype="multipart/form-data"`.
/// (2) Recepción: `Request.Files[index]` para obtener `HttpPostedFile`.
/// (3) Validación: Verificar `ContentLength` y extensión del archivo.
/// </summary>
public class FileUploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
const long MAX_UPLOAD_SIZE_BYTES = 10485760; // 10MB
var allowedExtensions = new[] { ".jpg", ".jpeg", ".png" };
string itemName = context.Request.Form["itemName"]; // Obtener datos del formulario
HttpPostedFile uploadedFile = context.Request.Files[0]; // Acceder al archivo subido
if (uploadedFile == null || uploadedFile.ContentLength == 0)
{
context.Response.Write("Por favor, seleccione un archivo para subir.");
return;
}
string originalFileName = Path.GetFileName(uploadedFile.FileName);
string fileExtension = Path.GetExtension(originalFileName).ToLowerInvariant();
if (!allowedExtensions.Contains(fileExtension))
{
context.Response.Write("Tipo de archivo no permitido. Solo se aceptan JPG, JPEG y PNG.");
return;
}
if (uploadedFile.ContentLength > MAX_UPLOAD_SIZE_BYTES)
{
context.Response.Write("El tamaño del archivo excede el límite permitido de 10MB.");
return;
}
// Generar un nuevo nombre de archivo para evitar colisiones y mantener la unicidad
string newFileName = $"UploadedImage_{Guid.NewGuid()}{fileExtension}";
string savePath = context.Request.MapPath($"~/App_Data/Uploads/{newFileName}"); // Ruta de guardado
// Crear el directorio si no existe
Directory.CreateDirectory(Path.GetDirectoryName(savePath));
try
{
uploadedFile.SaveAs(savePath); // Guardar el archivo
context.Response.Write($"Archivo '{originalFileName}' subido exitosamente como '{newFileName}'.");
}
catch (Exception ex)
{
context.Response.Write($"Error al guardar el archivo: {ex.Message}");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}