Asp.Net Web API - FileUpload

30/04/2013

0

.NET

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é....
Diego Silva

Diego Silva

Responder

Posts

02/05/2013

Ridley Silva

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: 
/*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);
Responder
Gostei + 0

03/05/2013

Diego Silva

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 **************

//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 *****************************
@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 ******

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!
Responder
Gostei + 0

06/05/2013

Ridley Silva

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.
Responder
Gostei + 0

08/05/2013

Diego Silva

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:
<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:
 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?
Responder
Gostei + 0

11/05/2013

Ridley Silva

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.
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar