Necesito ayuda sobre este tema; quiero almacenar una imagen en la base de datos en SQL Server, lo que he encontrado es con Web Forms en su mayoría y estoy trabajando con Razor y .NET Core 2.2 mediante una Web API. Mi duda es como se puede hacer eso.
Tengo 2 proyectos, uno es el web api y el otro es el razor el cual tiene un javascript que manda la informacion.
La tabla tiene el campo imgLogo
de tipo varbinary(MAX)
(Donde quiero almacenar la imagen).
Y este es el codigo del repository:
public async Task<bool> mtdAgregarCompania(string strDescripcion, string strStatus, byte[] imgLogo)
{
try
{
using (SqlConnection sql = new SqlConnection(_connectionString))
{
using (SqlCommand cmd = new SqlCommand("spAltaCompania", sql))
{
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@strDescripcion", strDescripcion));
cmd.Parameters.Add(new SqlParameter("@strStatus", strStatus));
cmd.Parameters.Add(new SqlParameter("@imgLogo", imgLogo));
await sql.OpenAsync();
await cmd.ExecuteNonQueryAsync();
return true;
}
}
}
catch (Exception e)
{
return false;
throw new Exception("Error", e);
}
}
private AddCompania MapToValueAddCompania(SqlDataReader reader)
{
return new AddCompania()
{
intIdCompania = reader["intIdCompania"] == DBNull.Value ? Convert.ToInt32(0) : (int)reader["intIdCompania"],
strDescripcion = reader["strDescripcion"].ToString(),
strStatus = reader["strStatus"].ToString(),
imgLogo = reader["strStatus"].ToString() //<---
};
}
El Controller:
public AddCompaniaController(IConfiguration configuration)
{
_connectionString = configuration.GetConnectionString("DefaultConnectionString");
}
[HttpPost("mtdAgregarCompania")]
public async Task<ActionResult> mtdAgregarCompania(string strDescripcion, string strStatus, byte[] imgLogo)
{
AddCompaniaRepository _repository = new AddCompaniaRepository(_connectionString);
if (await _repository.mtdAgregarCompania(strDescripcion, strStatus, imgLogo))
{
return Ok("Se agrego correctamente");
}
else return NotFound();
}
Y esto es el codigo de la vista razor:
@{
ViewData["Title"] = "AddCompania";
}
<script type="text" src="~/js/peticionesCompania.js">
</script>
<div class="container">
<div class="block-header">
<h2><strong>Registrar</strong> Compañia</h2>
</div>
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-lg-6 col-md-12">
<p class="my-2">Nombre de Compañia: *</p>
<div class="form-group">
<input id="txtCompania" type="text" class="form-control" placeholder="Compañia" minlength="4" required>
</div>
</div>
<div class="col-lg-6 col-md-12">
<p class="my-2">Status: *</p>
<div class="form-group">
<input id="txtStatus" type="text" class="form-control" placeholder="breve descripcion" minlength="4">
</div>
</div>
<div class="col-lg-12 col-md-12 body">
<form action="/" id="frmFileUpload" class="dropzone" method="post" enctype="multipart/form-data">
<div class="dz-message">
<div class="drag-icon-cph"> <i class="material-icons">touch_app</i> </div>
<h3 class="m-b-0">Suelte los archivos aquí o haga clic para cargar.</h3>
</div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</div>
<div class="col-lg-12 col-md-12 align-center">
<button class="btn btn-success btn-round" id="btnAgregarC">Agregar <i class="zmdi zmdi-save"></i></button>
</div>
</div>
</div>
</div>
</div>
Javascript que envia la informacion al api:
$(function () {
var rutaServidor = 'https://localhost:44302/api/';
//EVENTO QUE AL PRECIONAR EL BOTON btnGuardarEmpresa SE REALICE LO QUE ESTE DENTRO DE ESTE
$("#btnAgregarC").click(function () {
console.log("Guardando");
//SE VALIDA QUE NO EXISTAN CAMPOS VACIOS DE ENCONTRARSE UNO VACIO MOSTARÁ UN MENSAJE INFORMATIVO DE LO CONTRARIO REALIZARÁ LA PETICION AJAX PARA REALIZAR UN POST A LA BASE DE DATOS
if ($("#txtCompania").val() == "" || $("#txtStatus").val() == "" || $("#frmFileUpload").val() == "" ) {
Swal.fire({
type: 'error',
title: 'Campos vacíos',
text: 'No se puede guardar con campos vacíos'
});
} else {
console.log("Hola, empieza insercion");
$.ajax({
//TIPO DE PETICION QUE SE REALIZA
type: 'POST',
//URL A DONDE SE CONECTARÁ, EN ESTE CASO LOS PARÁMETROS QUE SE ENVIARÁN AL API NOTA: La variable rutaServidor es invocada desde otro script
url: rutaServidor + 'Usuarios/mtdInsertarUsuarios?strDescripcion=' + $.trim($("#txtCompania").val())
+ '&strStatus=' + $.trim($("#txtStatus").val())
+ '&imgLogo=' + $.trim($("#frmFileUpload").val()),
dataType: '',
success: function (response) {
console.log("hola, si se inserto compañia");
//ACCIONES A REALIZARSE EN CASO DE QUE LA PETICION SEA EXITOSA Y MOSTRARÁ UN MENSAJE SUCCESS
mtdLimpiarCamposUsuario();
$("#btnAgregarC").hide();
//$("#btnCancelar").hide();
Swal.fire({
type: 'success',
title: 'Agregado Correctamente',
text: 'La compañia se agregó correctamente'
});
},
error: function (x) {
console.log("Error");
//EN CASO DE TENER UN ERROR MOSTRARÁ UN MENSAJE ERROR
Swal.fire({
type: 'error',
title: 'Agregado Error',
text: 'Error en el servidor intente más tarde'
});
},
});
}
});
});
HttpClient
para consumir el Web API, podrías indicar el código si lo tienes?.