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.