Que tal tengo el problema que al mandar un formulario con un campo imagen al enviarlo y retornar mensaje de error del request se pierde la imagen... Como puedo hacer para mantener al imagen?
1 respuesta
La respuesta corta es: no se puede. No puedes mantener la imagen seleccionada en el campo una vez se envía un formulario.
Esto ocurre así por motivos de seguridad. Los navegadores no deben enviar un documento que el usuario no haya seleccionado expresamente (imagina que pudieran y un script malicioso seleccionara ficheros del ordenador del usuario y los enviara sin su consentimiento).
Y ahora la respuesta larga: por los motivos de seguridad explicados arriba no se mantiene la imagen seleccionada... pero puedes usar algunas alternativas para no obligar al usuario a tener que seleccionar una nueva imagen: bien simulando que la imagen sigue seleccionada, o directamente con la misma imagen (si el formulario no se envió).
Aquí dejo algunas de ellas:
A. Usa AJAX para enviar los datos el formulario
Si en lugar de mandar el formulario de manera tradicional (con el submit, redirigiendo a la página especificada en el action
) lo envías usando AJAX, entonces nunca perderás la imagen (porque la página no cambia) y no tendrás este problema.
Si los datos del formulario no validan, simplemente muestra el mensaje de error y ya está. La imagen seguirá estando seleccionada en el campo.
B. Usa la imagen que tienes ya en el servidor
La imagen se ha enviado ya al servidor cuando se envió el formulario. Si es válida, guárdala en algún sitio de manera temporal y deja claro al usuario que ya la tienes (p.e.: cambiando el campo por un mensaje de texto o incluso mostrando un enlace al documento/imagen).
Cuando se vuelva a enviar el formulario, toma la imagen guardada y úsala (ahora el formulario no tendrá imagen a no ser que le hayas dado la oportunidad al usuario de subir una nueva, en ese caso, descarta la imagen temporal y usa la nueva).
C. Usa una versión "codificada" de la imagen
No puedes mantener la imagen o enviar una imagen que el usuario no seleccionó... pero si el usuario selecciona un archivo, sí que puedes leerlo (p.e. con la API de FileReader) y mantener esos datos leídos. Por ejemplo, si el usuario selecciona una imagen, puedes leer su contenido, codificarlo y guardarlo en el LocalStorage para usarlo (p.e. como en el ejemplo de AJAX, sustituyendo el campo por un thumb o directamente por un campo oculto) en el caso de que el formulario falle.
Con este método, la imagen enviada la segunda vez no es exactamente la misma que seleccionó el usuario, sino una copia del original (ya sea en base64 o el texto literal, o como se haya guardado).
-
1
-
@Alvaro Montoro muy buena respuesta solo un pequeño detalle en cuanto a la última estrategia. Esta por lo general no es viable ya que LocalStorage por lo general está limitada a ~5MB y cualquier imagen en la actualidad puede superar facilmente ese tamaño. Lee stackoverflow.com/questions/2989284/… y dev-test.nemikor.com/web-storage/support-test Commented el 30 mar. 2016 a las 13:32