validate - uploadprogress jquery
AjaxForm y app motor blobstore (3)
Estoy teniendo algunas dificultades con la AjaxForm archivos AjaxForm y el motor de aplicaciones blobstore. Sospecho que la dificultad se debe a que el controlador de carga de blobstore (subclase de blobstore_handlers.BlobstoreUploadHandler) exige una respuesta de redireccionamiento, en lugar de devolver cualquier contenido, pero no estoy seguro. Espero obtener un documento XML con el que trabajar, y parece que llega al navegador como se esperaba, pero no puedo controlarlo, más detalles a continuación.
El controlador de carga de mi motor de aplicaciones blobstore es el siguiente:
class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
def post(self):
upload_files = self.get_uploads(''file'') # ''file'' is file upload field in the form
blob_info = upload_files[0]
entity_key = self.request.get("entityKey")
// Update a datastore entity with the blobkey (not shown)
// redirect to the uri for the updated entity
self.redirect(''%s.xml'' % entity_key)
La redirección final es a un uri en mi aplicación que devuelve un documento xml. En cuanto a la salida del servidor, no hay ninguna indicación de que algo esté mal: se reparó la redirección y se devuelve el documento XML como se esperaba, con el tipo de mimo correcto, por lo que el envío del formulario parece correcto y la respuesta del servidor a ese envío parece bueno.
El código del lado de mi cliente que usa ajaxForm tiene el siguiente aspecto (lo siento, es un poco obtuso, no creo que el problema esté aquí)
// Create the form
var dialogForm = $("<form method=''POST'' enctype=''multipart/form-data''>")
.append("<span>Upload File: </span><input type=''file'' name=''file''/><br>")
.append("<input type=''hidden'' name=''entityKey'' value=''" + entityKey + "''/>")
.append("<input type=''hidden'' name=''entityField'' value=''image''/>")
.append("<input type=''button'' value=''Wait...'' disabled=''disabled''/>");;
dialogForm.ajaxForm();
// Turn the form button into a nice jQuery UI button and add a click handler
$("input[type=button]", dialogForm[0]).button()
.click(function() {
log.info("Posting to : " + dialogForm.attr(''action''));
dialogForm.ajaxSubmit({
success: function(responseText, statusText, xhr, $form) {
log.info("Response: " + responseText + ", statusText: " + statusText + ", xhr: " + goog.debug.expose(xhr) + ", form:" + goog.debug.expose($form));
}
});
});
Pongo la ''acción'' en el formulario (y habilito el botón) después -
$.get(''/blob_upload_url'', function(data) {
dialogForm.attr("action", data);
$("input[type=button]", dialogForm[0]).attr("value", "Upload").button("option", "disabled", false);
};
Estoy usando un poco de cierre de Google allí también para registrar y exponer objetos. Todo se ve bien, como se esperaba, se está publicando correctamente en el servidor y se llama a la función de éxito. Si veo la estructura del documento en las herramientas de desarrollo de Chrome, puedo ver que el iFrame se crea brevemente para manejar la carga y respuesta del archivo.
El problema es que nunca obtengo el documento xml en la respuesta. La salida del registro es la siguiente:
[ 18.642s] [Panel] Response: null, statusText: success, xhr: 0 = [object HTMLFormElement]
length = 1
selector =
jquery = 1.4.2, form:0 = [object HTMLFormElement]
length = 1
selector =
jquery = 1.4.2
Resource interpreted as document but transferred with MIME type application/xml [ABCdefGH]
La queja de Chrome sobre el tipo mime es probablemente muy relevante, pero no estoy haciendo la conexión :) - al menos significa que está recibiendo el documento XML en algún momento. En la vista de recursos de Chrome, puede ver el POST, y que la respuesta es un redireccionamiento 302, y luego la solicitud GET posterior, cuyo encabezado se ve bien -
Request URL:http://localhost:8081/_ah/upload/ABCdefGH
Request Method:GET
Status Code:200 OK
Request Headers
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.70 Safari/533.4
Response Headers
Cache-Control:no-cache
Content-Length:2325
Content-Type:application/xml
Date:Sun, 20 Jun 2010 20:47:39 GMT
Expires:Fri, 01 Jan 1990 00:00:00 GMT
Server:Development/1.0
La vista de recursos de Chrome no me mostrará el contenido de ese documento (solo está en blanco), pero Firefox lo hace y el documento XML se ve bien. Sin embargo, Firefox da el mismo resultado final: nulo para el texto de respuesta ajaxSubmit ().
Me imagino que solo tengo un cerebro desvanecido aquí en alguna parte, pero realmente me dejó perplejo. Cualquier puntero para obtener ese documento xml sería genial - saludos,
Colin
Aquí hay un método que he usado (solo probado en Chrome) ligeramente modificado. No es AjaxForm pero funciona.
function upload_files(entityKey, files, url, progress_callback) {
var xhr = new XMLHttpRequest(), formData = new FormData();
xhr.upload[''onprogress''] = progress_callback;
formData.append(''entityKey'', entityKey);
$.each(files, function(i, file) { formData.append(''file[]'', file);});
xhr.open("post", url, true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.send(formData);
}
La entityKey está disponible como entityKey en el servidor. El parámetro ''archivos'' proviene del atributo ''archivos'' del elemento de formulario de entrada de tipo de archivo (como una matriz para admitir múltiples). El parámetro ''progress_callback'' es una función que toma un objeto que tiene (al menos) un campo ''cargado'' y un ''total'' (la unidad es bytes). No le importa la respuesta del servidor.
Así es como lo resolví. Agregué una identificación aleatoria generada en el envío de javascript junto con el archivo. una vez que se complete la carga, configure mi servidor para recordar la asociación de esa identificación aleatoria y el archivo cargado por un tiempo. Envío otra consulta a una url predefinida como mysite.com/blobdata/that_random_id_i_renerated para solicitar el archivo que se acaba de cargar. funcionó.
Si tienes 5 meses atrapados en el mismo problema ... creo que deberías preguntar aquí: