jquery, ajax y FileUpload

[nelopa...@gmail.com]

Hola gente, ¿alguien saber como hacer un fileupload con jquery para un
post mediante ajax?

saludos.
nelo

[Ariel Piñeiro]

Revisá por aquí... ;)

http://www.uploadify.com/ 

Saludos,
Ariel Piñeiro
http://ar.linkedin.com/in/arielpineiro

2012/2/15 nelopa...@gmail.com <nelopa...@gmail.com>

--
Has recibido este mensaje porque estás suscrito al grupo "AltNet-Hispano" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a altnet-...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a altnet-hispan...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/altnet-hispano?hl=es.

[Mauro Decima]

http://www.plupload.com

 

http://www.plupload.com/example_queuewidget.php

 

2012/2/15 Ariel Piñeiro <arie...@gmail.com>

--

Convertí tus archivos a pdf gratis en http://www.guardarcomopdf.com

[José F. Romaniello]

Yo use este:

http://valums.com/ajax-upload/ 

 Este pluggin utiliza XHR si el browser lo soporta, y si el browser no lo soporta crea un iframe oculto y hace un post de ese frame por detras. 

La cosa es que por en ejemplo en MVC, tenes que contemplar los dos casos cuando te llega un XHR o cuando te llega por un fileupload común.

Por ejemplo yo hice un Action así:

        [HttpPost, HandleJsonError]

        public ActionResult Upload(string id,

                                   [ModelBinder(typeof(ByteArrayUploadBinder))] Tuple<string, byte[]> file) {

            try {

                insertFooBarCommand.Execute(int.Parse(id), file.Item2);

                var jsonResult = Json(new { success = true }, JsonRequestBehavior.DenyGet);

                jsonResult.ContentType = "text/html"; // Esto lo necesitas para browsers sin XHR. ie IE :P

                return jsonResult;

            } catch (Exception ex) {

                var jsonResult = Json(new { error = ex.Message }, JsonRequestBehavior.DenyGet);

                jsonResult.ContentType = "text/html";

                return jsonResult;

            }

        }

La clase ByteArrayUploadBinder es esta:

    public class ByteArrayUploadBinder : FileUploadModelBinder

    {

        public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

        {

            var bindModel = (Tuple<string, Stream>)base.BindModel(controllerContext, bindingContext);

            var stream = ReadStream(bindModel.Item2);

            return Tuple.Create(bindModel.Item1, stream);

        }

        private static byte[]  ReadStream (Stream input)

        {

            var buffer = new byte[16 * 1024];

            using (var ms = new MemoryStream())

            {

                int read;

                while ((read = input.Read(buffer, 0, buffer.Length)) > 0)

                {

                    ms.Write(buffer, 0, read);

                }

                return ms.ToArray();

            }

        }

    }

y FileUploadModelBinder:

    public class FileUploadModelBinder : IModelBinder {

        public virtual object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) {

            //is an XHR file upload.

            var request = controllerContext.HttpContext.Request;

            if(request.QueryString.AllKeys.Contains("qqfile"))

            {

                return Tuple.Create(request.QueryString["qqfile"], 

                                    controllerContext.HttpContext.Request.InputStream);

            }

            //is a normal POST file upload.

            if(request.Files.AllKeys.Contains("qqfile") && request.Files["qqfile"] != null)

            {

                return Tuple.Create(request.Files["qqfile"].FileName,

                                    request.Files["qqfile"].InputStream);

            }

            

            throw new InvalidOperationException("invalid file upload request");

        }

    }

[José F. Romaniello]

Me ovlidaba... el plugin ese tiene drag and drop ala gmail, y muestra una barra de progreso (de nuevo, si el browser puede).

[Leonardo Micheloni]

tengo una gran duda José, si bien uploadify usa flash y por eso anda, no veo como hace valums para acceder desde javascript al file (que sería la limitación más grande)...tenés idea?

otro tema sería querar subir algo cross-domain con XHR

--

Leonardo Micheloni

@leomicheloni

[José F. Romaniello]

agrega un input type="file" dinamicamente... Debe ser algo similar a lo que se explica en este post:

http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads 

[Leonardo Micheloni]

en teoría no podés desde javascript acceder al contenido de un file porque estás en el sandbox!??!

[José F. Romaniello]

fijate este inofensivo pedazo de código de ejemplo:

 1 var fileInput = document.getElementById('the-file');
 2 var file = fileInput.files[0];
 3 
 4 var xhr = new XMLHttpRequest();
 5 xhr.upload.addEventListener('progress', onprogressHandler, false);
 6 xhr.open('POST', '/upload/uri', true);
 7 xhr.send(file); // Simple!
 8 
 9 function onprogressHandler(evt) {
10     var percent = evt.loaded/evt.total*100;
11     console.log('Upload progress: ' + percent + '%');
12 }

Y de hecho aca crea el input type="file" en lo de valums  https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L795  

[José F. Romaniello]

Digamos que el control hace dos cosas:

1- si lo apretas muestra un dialog box para que selecciones el archivo. Ese dialogo lo abre, invocando al input que tiene creado por detras: con el metodo click quizas..

2- si arrastras el archivo, ahi usa el event.dataTransfer.Files creo que es esta línea https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L569 

El 15 de febrero de 2012 19:47, Leonardo Micheloni <leonardogabr...@gmail.com> escribió:

[Leonardo Micheloni]

sigo pensando que es magia, vi esa parte del código pero mis creencias me decían que era imposible.....lo voy a probar yo porque sigo incrédulo :P

gracias!

--
Has recibido este mensaje porque estás suscrito al grupo "AltNet-Hispano" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a altnet-...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a altnet-hispan...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/altnet-hispano?hl=es.

--

Leonardo Micheloni

@leomicheloni

[José F. Romaniello]

Lo que decís del sandbox es cierto, siempre y cuando el usuario no seleccione un archivo o arrastre un archivo al browser, la aplicación web jamas podrá leer un archivo del disco.

En el caso de este pluggin una de esas dos cosas tiene que pasar...

[Leonardo Micheloni]

hereje

[Cristian Prieto]

Me llamo hoy la atencion esta conversacion, no porque alguien este equivocado o no, como siempre acertadas las respuestas de Jose, sin embargo, uno siempre es lleno de pendejadas y le pone atencion a detalles sin importancia, uno de ellos es el soporte de XHR en IE....

Este pluggin utiliza XHR si el browser lo soporta, y si el browser no lo soporta crea un iframe oculto y hace un post de ese frame por detras. 

Y bueno, en el sitio dicen que IE no soporta XHR, extrano, siendo IE5 el primer browser con soporte para XHR (XmlHttpRequest, lo que le dio vida al famoso AJAX).... revisando el codigo me tope con un simple y minusculo error de redaccion... no se refieren a XHR si no a XHR Level 2, una NUEVA especificacion *aun* en draft http://www.w3.org/TR/XMLHttpRequest2/ que simplemente extiende la XHR original y agrega soporte para cosas interesantes como reporte de eventos (IE10 soporta XHR Level 2 por cierto). Otra razon de la importancia de XHR2 es el soporte para enviar data en formato binario, importante para archivos =)

Esta parte es valiosisima: 

en teoría no podés desde javascript acceder al contenido de un file porque estás en el sandbox!??! 

En browsers "modernos" hay dos tipos de sandboxes, el process sandbox y el frame sandbox (este ultimo llamado tambien HTML5 Sandboxing). Si bien es cierto lo que dice Jose en su respuesta:

Lo que decís del sandbox es cierto, siempre y cuando el usuario no seleccione un archivo o arrastre un archivo al browser, la aplicación web jamas podrá leer un archivo del disco. 

Esto es cierto pero realmente depende mucho del browser, en IE, por ejemplo, cada pagina o tab vive en un proceso que esta restringido de absolutamente todo, incluyendo el acceso a archivos. Como puedo entonces acceder a un archivo si el proceso esta restringido de hacerlo? BUENA pregunta!!!!... Simple, en el momento en que apretamos "Open" luego de seleccionar un archivo el browser crea un "broker process" afuera del sandbox con el permiso necesario para abrir y leer el archivo... El mismo mecanismo esta implementado en Chrome y en versiones muy muy recientes de FF. Esto es importante saberlo ya que el equipo de FF tubo problemas conceptuales al implementar el soporte a Web workers en un mundo sin process sandbox... interesante no creen?

Luego la segunda parte de la respuesta de Jose me creo un par de dudas adicionales (no por la respuesta, muy acertada como siempre Jose, si no por como realmente funcionaria):

En el caso de este pluggin una de esas dos cosas tiene que pasar...

Como funciona entonces para plugins como Adobe Flash? este tambien esta sujeto a los mismos problemas? Nuevamente depende (dijo Pepito), en IE > 7 y Chrome (ignoro Opera, pero esta entre mi lista de cosas por averiguar) por default las tabs corren como procesos aislados dentro de un sandbox al igual que los plugins, asi que Flash esta sujeto a las mismas limitaciones que el proceso que mantiene la tab... 

En fin, solo mi granito de arena =)

Cristian Prieto

2012/2/16 Leonardo Micheloni <leonardogabr...@gmail.com>

[Edgar Ramos]

Excelente aporte Cristian

Muy agradecido

Saludos
Edgar

Saludos

Edgar

[Leonardo Micheloni]

muy interesante Cristian, hay alguna lectura interesante acerca de detalles de los browsers modernos como este que puedas recomendar?