none
Imágenes o PDF en Web Api Rest RRS feed

  • Pregunta

  • Buen dia, me ha nacido una duda, estoy desarrollando una WebApi Rest en C#, por otro lado tengo estoy desarrollando una WebApp Html5 con AngularJs que consume ese Servicio.

    Entonces tengo 2 sitios, El primero la Api en el Servidor IIS y la otra en el mismo servidor pero lo corre un servicio node, ambos salen por la IP publica pero uno consume al otro.

    Ahora en la Aplicación Web debo registrar unos documentos pdf o imágenes y serán enviados al Servicio y Guardados en una carpeta (eso ya esta y funciona bien).

    Ahora quiero hacer lo contrario, mostrar esos documentos, como una opción ver, entonces poder acceder a los pdf o imágenes guardadas.

    Como podría desde mi Api enviar esos documentos??

    domingo, 13 de marzo de 2016 20:17

Respuestas

  • >>pero lo que no puedo es mostrar la imagen y poder tener la opción de descargar el PDF cargado.

    entiendo estas accediendo directo al webapi desde el cliente usando angular

    si es asi la imagen es simple de trabajar porque puedes recuperar en base64 directo desde el webapi y asignarla al <img>, solo tomas la imagen desde la db y le aplicas Convert.ToBase64String(), entonces pasa como string

    El tema es con el archivo, hacer un download desde el cliente no se puede, por eso es que debes usar jquery.fileDownload para poder realizar un download usando ajax

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta CrissR jueves, 17 de marzo de 2016 16:12
    lunes, 14 de marzo de 2016 19:44
  • Hola CrissR,

    Cuando bajas un fichero de un servidor no bajas el fichero físico, sino que envías el byte array dentro del mensaje,

    con el código que te he puesto y el jquery.filedownload te funcionaría.

    En este link: http://stackoverflow.com/questions/27034530/download-a-file-from-server-using-angularjs tienes un ejemplo de como usar jquery.filedownload con AngularJS.

    Respecto las imágenes como ya te hemos comentado Leandro y yo anteriormente.

    • Marcado como respuesta CrissR jueves, 17 de marzo de 2016 16:12
    martes, 15 de marzo de 2016 7:53

Todas las respuestas

  • Alguna idea??

    lunes, 14 de marzo de 2016 15:48
  • Hola CrissR

    Aquí te paso el código que utilizo yo:

    public async Task<HttpResponseMessage> Download(Aquí los parametros que necesites)
    {
                
                    //Obtiens el byte array del documento
    				byte[] myByteArray = obtain byte array
    
                    HttpResponseMessage message = new HttpResponseMessage(HttpStatusCode.OK);
    
                    message.Content = new ByteArrayContent(myByteArray);
                    message.Content.Headers.ContentLength = myByteArray.Length;
                    message.Content.Headers.Add("Set-Cookie", "fileDownload=true; path=/");
                    //Aquí a el contenttype del documento pej: "application/pdf"
    				message.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(El contentType del docuemnto);
                    message.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                    {
                        FileName = name
                    };
                    
                    return message;
               
      }

    lunes, 14 de marzo de 2016 17:03
  • hola

    esta claro que las imagenes no vas a poder tratarlas igual que los archivos

    una imagen podrias devolverla desde el webapi con el formato base64 para mostarlo de forma directa en un <img> de html

     Displaying Database-stored Images in ASP.NET MVC with Data URLs

    en cambio un archivo necesitas descargarlo, mostrando al usuario el dialogo de descarga

    aunque podrias usar ajax por medio de jquery.fileDownload


    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 14 de marzo de 2016 17:10
  • CrissR,

    Las imagenes también puedas hacer un tratamiento similar, en vez de devolver el httResponseMessage devuelves el Byte[] directamente y listos.

    Como bien dice Leandro utiliza jquery.fileDownload es como lo hago yo.

    Saludos.


    lunes, 14 de marzo de 2016 17:24
  • Buen dia, me ha nacido una duda, estoy desarrollando una WebApi Rest en C#, por otro lado tengo estoy desarrollando una WebApp Html5 con AngularJs que consume ese Servicio.

    Entonces tengo 2 sitios, El primero la Api en el Servidor IIS y la otra en el mismo servidor pero lo corre un servicio node, ambos salen por la IP publica pero uno consume al otro.

    Ahora en la Aplicación Web debo registrar unos documentos pdf o imágenes y serán enviados al Servicio y Guardados en una carpeta (eso ya esta y funciona bien).

    Ahora quiero hacer lo contrario, mostrar esos documentos, como una opción ver, entonces poder acceder a los pdf o imágenes guardadas.

    Como podría desde mi Api enviar esos documentos??

    Hola CrissR.  No me queda 100% claro dónde necesita ayuda.  Cuando leí su pregunta pensé:  Necesita ayuda creando el API REST, pero luego veo que le responden cosas como jQuery.fileDownload y entonces al final no estoy seguro qué necesita.  ¿Podría indicarnos a todos por dónde anda la pregunta (si del lado del cliente o del lado WebApi REST)?

    Otro detalle:  ¿Está haciendo el WebApi REST con MVC WebApi?


    Jose R. MCP
    Code Samples

    lunes, 14 de marzo de 2016 17:38
    Moderador
  • Pero retornas el mensaje Robert? y el archivo?
    lunes, 14 de marzo de 2016 19:08
  • Hola WebJose, el Servicio Rest lo he creado y logro guardar el archivo. Ahora lo que quiero es lo contrario, lograr recuperar el archivo.

    Por ejemplo, tengo un registro de usuarios y cada usuario en un fileupload carga su foto y en otro carga un archivo PDF.

    Logro Registrarlo y guardar los archivos en la carpeta que tengo creada para eso en la Api Rest dentro del servidor.

    Hasta hay bien, ahora quiero listar los usuarios registrados y si le doy por ejemplo click en ver pues veo todos los datos del usuario registrado. (Eso funciona) pero lo que no puedo es mostrar la imagen y poder tener la opción de descargar el PDF cargado.

    Tampoco se como hacerlo pues retorno json con la info que guardo en la db pero como retornar el archivo y la imagen??

    lunes, 14 de marzo de 2016 19:12
  • Ok, parece ser que necesita ayuda creando esta parte del REST.

    No sé cómo armó usted el upload del REST.  Personalmente nunca he hecho upload con REST, pero imagino que sería un HTTP PUT con un URL como http://dominio/api/usuario/<id de usuario>/foto para la fotografía, y algo más (PDF, biografia, etc.) para el PDF (http://.../<id de usuario>/biografia).  ¿Estoy en lo cierto?  Si es así, el obtener la fotografía debería ser con un HTTP GET http://dominio/api/usuario/<id de usuario>/foto.  Lo que cambia es el verbo según la especificación de REST.  El action en el controlador de web api que satisface este URL debe enviar una respuesta con un MIME type apropiado y escribir el archivo de imagen como un arreglo de bytes y listo.  De hecho el PDF es la misma cosa:  Setear el MIME para PDF y escribir en el Response el arreglo de bytes y ya tiene su descarga.

    Ahora bien, usted dice que desea mostrar la foto.  Para eso usamos un elemento <img> en HTML.  Solamente tiene que setear el src.  Ese src es texto y puede venir en el JSON que usted menciona.  Igualmente el URL para el download del PDF.

    ¿Me expliqué bien?  Si no, pues no dude en preguntar.


    Jose R. MCP
    Code Samples

    lunes, 14 de marzo de 2016 19:27
    Moderador
  • >>pero lo que no puedo es mostrar la imagen y poder tener la opción de descargar el PDF cargado.

    entiendo estas accediendo directo al webapi desde el cliente usando angular

    si es asi la imagen es simple de trabajar porque puedes recuperar en base64 directo desde el webapi y asignarla al <img>, solo tomas la imagen desde la db y le aplicas Convert.ToBase64String(), entonces pasa como string

    El tema es con el archivo, hacer un download desde el cliente no se puede, por eso es que debes usar jquery.fileDownload para poder realizar un download usando ajax

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta CrissR jueves, 17 de marzo de 2016 16:12
    lunes, 14 de marzo de 2016 19:44
  • Hola CrissR,

    Cuando bajas un fichero de un servidor no bajas el fichero físico, sino que envías el byte array dentro del mensaje,

    con el código que te he puesto y el jquery.filedownload te funcionaría.

    En este link: http://stackoverflow.com/questions/27034530/download-a-file-from-server-using-angularjs tienes un ejemplo de como usar jquery.filedownload con AngularJS.

    Respecto las imágenes como ya te hemos comentado Leandro y yo anteriormente.

    • Marcado como respuesta CrissR jueves, 17 de marzo de 2016 16:12
    martes, 15 de marzo de 2016 7:53
  • Hola Leandro esta bastante interesante ese plugin, voy a probarlo y te cuento.
    martes, 15 de marzo de 2016 14:08
  • Hola Robert justo estoy revisando haber como me va
    martes, 15 de marzo de 2016 14:09