Array
(
)

Asp.Net Web API - FileUpload

Diego Silva
|
MVP
    30 abr 2013

Ola,
queria uma ajuda de vocês, estou iniciando com Web API, e tenho uma aplicação onde preciso salvar imagem em um campo de banco de dados longblob(MySql) eu encontrei alguns exemplos como:http://code.msdn.microsoft.com/ASPNET-Web-API-File-Upload-a8c0fb0d/view/SourceCode#content
Porém sem salvar no banco de dados, se alguém souber como eu posso salvar uma imagem no banco de dados usando Web API eu agradeço!
Até....

Ridley Silva
   - 02 mai 2013

Diego boa noite.
Em seu banco de dados você precisa criar um campo com o nome e a extensão do arquivo, para que futuramente você possa salvar ele no sistema de arquivos do sistema operacional. Ex: arquivo.pdf.
No evento de submit você pode pegar o arquivo da seguinte forma:
#Código
/*Pega a coleção de arquivos sobre o Post*/
System.Web.HttpFileCollection fileColl = System.Web.HttpContext.Current.Request.Files;
/*Varre a lista de arquivos*/
foreach (string s in fileColl.Keys){
HttpPostedFile postedFile = fileColl.Get(s);

BinaryReader bReader = new BinaryReader(postedFile.InputStream);

byte[] buffer = bReader.ReadBytes((int)postedFile.InputStream.Length)
}

EnviarBd(postedFile.FileName,buffer);

Diego Silva
|
MVP
    03 mai 2013

Bom dia Ridley,
Eu tentei implementar esse exemplo que você me passou, mais estou com algumas dificuldades, não estou sabendo como utiliza - la,. Vou mostrar como a minha aplicação esta implementada quem sabe você consiga me ajudar.
Eu estou usando o Jquery(Ajax) para poder realizar as operaçoes de Insert, Update e Delete.

***************** Arquivo .js **************

#Código//Get based on keyValue
function viewItem(keyValue) {
ajaxBlock();

if (typeof keyValue == 'undefined')
keyValue = $('#' + $('#details').data('key')).val();

$.ajax({
url: $('#details').data('api') + '/' + keyValue,
type: 'GET',
dataType: 'json',
success: function (items) {
ajaxUnblock();

writeItem(items);
},
error: function (status) {
ajaxUnblock();

alert('Error at view item:' + status.responseText);
}
});
}

//Set select options
function setOptions() {
$('#details').find('select').each(function () {
var url = $(this).data('api');

if (typeof (url) != 'undefined')
fillSelectOptions($('#' + this.id), url);
})
}

//Save
function saveItem() {
var error = false;

$('#details').find('[required="required"]').each(function () {
if (!error && ($(this).val() == null || $(this).val() == '')) {

alert('Please fill out the field "' + $('#details').find('[for="' + this.id + '"]').html() + '"!');
$(this).focus();

error = true;
};
});

if (!error) {
var keyValue = $('#' + $('#details').data('key')).val();

if (keyValue == null || keyValue == ''/* || keyValue == 0*/)
insertItem();
else
updateItem();
}
}

//Insert
function insertItem() {
ajaxBlock();

$.ajax({
url: $('#details').data('api'),
type: 'POST',
data: JSON.stringify(setItem()),
contentType: 'application/json;charset=utf-8',
success: function () {
ajaxUnblock();

viewGrid();
},
error: function (status) {
ajaxUnblock();

alert('Error at add item:' + status.responseText);
}
});
}

//Update
function updateItem() {
ajaxBlock();

var keyValue = $('#' + $('#details').data('key')).val();

$.ajax({
url: $('#details').data('api') + '/' + keyValue,
type: 'PUT',
data: JSON.stringify(setItem(keyValue)),
contentType: 'application/json;charset=utf-8',
success: function () {
ajaxUnblock();

viewGrid();
},
error: function (status) {
ajaxUnblock();

alert('Error at update item:' + status.responseText);
}
});
}

//Delete
function deleteItem() {
ajaxBlock();

$.ajax({
url: $('#details').data('api') + '/' + $('#' + $('#details').data('key')).val(),
type: 'DELETE',
dataType: 'json',
success: function () {
ajaxUnblock();

viewGrid();
},
error: function (status) {
ajaxUnblock();

alert('Error at delete item' + status.responseText);
}
});
}
//Select Options
function fillSelectOptions(obj, url) {
var objValue = 'item.' + (typeof (obj.data('value')) != 'undefined' ? obj.data('value') : 'id');
var objLabel = 'item.' + (typeof (obj.data('label')) != 'undefined' ? obj.data('label') : 'name');

obj.css('disabled', true);

$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function (data) {
obj.find('option').remove();

obj.append(new Option('Select', ''));

$.each(resolveReferences(data), function (index, item) {
obj.append(new Option(eval(objLabel), eval(objValue)));
});

obj.css('disabled', false);
},
error: function (data) {
alert('Error at fill options: ' + data.responseText);
}
});
}

************** Arquivo FiImage.cshtml *****************************
#Código
@model NomeProjeto.fi_image

<form name="form1" method="post" enctype="multipart/form-data" data-api="/api/fiimage" data-key="id" id="details">

<fieldset>
<legend>Fi Image</legend>

<label for="fi_id">Fi ID</label>
<select id="fi_id" required="required" data-api="/api/fi" data-label="id"></select>

<label for="image">Image File</label>
<input name="image" type="file" value="" />
</fieldset>
</form>


****** Arquivo FiImageController.cs ******

#Código
public class FiImageController : ApiController
{
private bancodedadosEntities db = new bancodedadosEntities();

// PUT api/FiImage/5
public HttpResponseMessage Putfi_image(int id, fi_image fi_image)
{
if (!ModelState.IsValid)
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}

if (id != fi_image.id)
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}

db.Entry(fi_image).State = EntityState.Modified;

try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}

return Request.CreateResponse(HttpStatusCode.OK);
}

// POST api/FiImage
public HttpResponseMessage Postfi_image(fi_image fi_image)
{
if (ModelState.IsValid)
{

HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, fi_image);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = fi_image.id }));
return response;
}
else
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
}
}


Acho que eu exagerei, mais se puder me ajudar eu agradeço, enquanto isso vou continuar tentando aqui.

Abraço!

Ridley Silva
   - 06 mai 2013

Diego.
Primeiramente, seu código esta conseguindo chegar nos métodos do C#?
Faça um teste coloque um botão de submit para realizar o Post do formulário, e teste o código que te passei, depois você implementa o ajax.

Diego Silva
|
MVP
    08 mai 2013

Ridley,
eu não conseguir entender como posso utilizar esse codigo que vc me passou, vou mostrar o que esta ocorrendo com a minha aplicação ai quem sabe vc pode me ajudar.
É o seguinte, eu tenho meu arquivo .cshtml:
#Código<fieldset id="details" data-api="/api/fiimage" data-key="id">
<legend>Fi Image</legend>

<input type="hidden" id="id" value="" />

<label for="fi_id">Fi</label>
<select id="fi_id" required="required" data-api="/api/fi" data-label="id"></select>

<label for="image">Image</label>
<input type="file" id="imagem" value="" />

<input type="hidden" id="image" value="" />

</fieldset>


eu insiro a informação da tag select e da tag input, clico em salvar, salva correto o id e a informação da tag select.Porém o arquivo que eu seleciono da tag <input type="file"> não salva.
Então eu inserir um breakpoint no metodo POST do meu Controller e vi que o campo image(nome do campo do meu banco de dados - longblob) esta como {byte[0]}.
método POST do controller:
#Código public HttpResponseMessage Postfi_image(fi_image fi_image) //<- meu objeto(image) encontra - se como {byte[0]}
{
if (ModelState.IsValid)
{
db.fi_image.Add(fi_image);
db.SaveChanges();

HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, fi_image);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = fi_image.id }));
return response;
}
else
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}

}


Você saberia como eu posso, passar esse arquivo para o meu objeto dentro do meu controller ou seria de outra maneira para realizar essa operação?

Ridley Silva
   - 11 mai 2013

Diego o envio de arquivo via inputfile no mvc é simples.
Pelo que vi em seu código esta correto.
Mas faça algumas alterações para ver se encontra o erro.
1 - remova value="" em seu inputfile. Pois este atributo é utilizado para enviar a informação do arquivo.
2- Caso a primeira opção não funcione, tente adicionar um botão de submit em seu projeto para teste.
3 - Coloque o atributo [HttpPOST] em seu método.

Tente estas alternativas e me retorne informando se funcionou. Peço desculpa pela demora na resposta.