[ASP.NET Web API] Subiendo archivo con jQuery y Web API

Descarga el código

Hola, hoy quiero mostrarles como podemos subir archivos al servidor utilizando jQuery y un servicio con ASP.NET Web API.

Lo primero es que vamos a definir el código HTML, lo importante es definir un input de tipo file:

<div class="jumbotron">
    <h1>ASP.NET Web API - File Upload</h1>
    <div class="row">
        <div class="col-md-12" style="font-size:medium">
            <div class="form-group">
                <label class="col-md-2 control-label">Archivo:</label>
                <div class="col-md-10">
                    <input id="inputFile" type="file" multiple="multiple" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Subir" id="btnUpload" class="btn btn-default" />
                </div>
            </div>
        </div>
     </div>
</div>

Ahora vamos a implementar la parte de JavaScript, en este caso vamos a asociar un manejador para el evento click del botón btnUpload y allí dentro haremos uso de AJAX para comunicarnos con el servidor:

$(document).on("ready", function () {
	$("#btnUpload").on('click', function () {
		var files = $("#inputFile").get(0).files;
		var data = new FormData();
		for (i = 0; i < files.length; i++) {
			data.append("file" + i, files[i]);
		}
		$.ajax({
			type: "POST",
			url: "/api/file",
			contentType: false,
			processData: false,
			data: data,
			success: function (result) {
				if (result)
				{
					alert('Archivos subidos correctamente');
					$("#inputFile").val('');
				}
			}
		});
	})
})

Lo que el código anterior hace es:

1. Obtiene la colección de archivos seleccionados.
2. Crea un nuevo objeto FormData y añade los archivos seleccionados
3. Se realiza la petición al servidor utilizando AJAX (en este caso apoyados en jQuery), en url definimos la url del servicio (que vamos a crear en el siguiente paso), el verbo Http que es un POST y los datos a enviar.

Ahora el controlador:

public class FileController : ApiController
{
	public IHttpActionResult Post()
	{
		var request = HttpContext.Current.Request;
		if (request.Files.Count > 0)
		{
			foreach (string file in request.Files)
			{
				var postedFile = request.Files[file];
				var filePath = HttpContext.Current.Server.MapPath(string.Format("~/Uploads/{0}", postedFile.FileName));
				postedFile.SaveAs(filePath);
			}
			return Ok(true);
		}
		else
			return BadRequest();
	}
}

El código del controlador es sencillo, simplemente leemos la cantidad de archivos en el request y en caso de ser mayor a 0 iteramos sobre cada uno de ellos y lo guardamos.

Espero el ejemplo les sea de utilidad, saludos!