Gestión de imágenes react native y django.

En casi toda las aplicaciones lo que le da vida es la interacción del usuario con sus propias multimedia, las imágenes son casi siempre muy importante para aplicaciones como redes sociales, ¿que seria de Facebook sin una foto de perfil? O twitter. Serian simplemente anónimas pareciera que no hubiera diferencia entre un usuario u otro. Sin mas preámbulo veamos como subir una foto a nuestro servidor en django.

Captura de imagen

Para esto usaremos la siguiente librería React Native Image Piker.
$ yarn add react-native-image-picker
$ react-native link

Una ves corridos esos dos comando en nuestro proyecto en react native estará listo para usarlo

Una vez importado

Creamos una función para ejecutar dicho llamado. Lo primero en hacer es crear un json de opciones, la opciones mas relevante son, “takePhotoButtonTitle” que es label que llevara nuestro botón de tomar una foto y “chooseFromLibraryButtonTitle” que será el de seleccionar una foto de nuestra galería. Después usamos la función de ImagePicker.showImagePicker(), la cual le pasaremos dos parámetros: opciones y un callback y finalmente en nuestro callback declaramos una serie de condiciones para evitar un error en la librería al final el nos devolverá una respuesta de la cual podemos extraer los siguientes datos  la “uri” que es la ubicación la la imagen en nuestro dispositivo, la “data” la cual es nuestra imagen en base 64 muy importante ya que esa es la data que enviaremos a nuestro servidor para ser subida y finalmente por mi parte extraigo el tipo de imagen que es con la siguiente línea “tipo = response.uri.split(".")” lo cual usare en mi aplicación en dijango.

Renderizar nuestra imagen

Primero encerraremos todo en un “TouchableOpacity” para poder vincular nuestro “onPress” a nuestra función después pondremos una condicional corta para cuando no tengamos una url de la imagen nos aparezca el testo de “seleccione una foto” el source de nuestra imagen será el uri de la imagen,

Subir nuestra foto

Para eso crearemos nuestra función “send” usamos una función que llame “isBlank” para comprobar que ya este una imagen seleccionada lista para subir, como parámetros enviaremos la data en base 64, el tipo y en mi caso especifico los datos del usuario.

Eso seria todo de parte de react native.

Guardar imagen en django “models”

Lo primero que debemos preparar en nuestra app de django en un models en donde guardar nuestra imagen.

El parámetro “upload_to” es la carpeta donde django subirá dicha imagen. Lo siguiente será configura nuestro django para que sirva nuestras fotos en una url lo cual lo aremos en nuestro archivo “urls.py” agregando a nuestra variable “urlpatterns” la siguiente línea

La cual le dirá a django que url usar para nuestros media file o archivos multimedia.

Guardar imagen en django “views”

Lo primero son las importaciones

El csrf_exempt es para que nuestras peticione via post no nos exija el tokens que genera dijango para sus templetes, mientras que el ContenFile será como un envase en memoria de nuestra imagen, el base64 sera para decodificar nuestra imagen y el json para decodificar nuestra petición

Lo primero es poner el decodificar nuestra request para eso usaremos la unción jeson.loads() la cual no convierte de testo a un objeto de cual podemos acceder a sus key, mientras que nuestra variable data será una instancia del ContenFile() para la cual le pasamos los datos de nuestra imagen decodificado de base 64, el nombre que queremos darle al archivo y finalmente el tipo de imagen que es después de eso buscamos o creamos el registro de nuestro usuario, y guardamos la foto en nuestro correspondiente campo

Bonus: eliminar la imagen anterior para no generar tanta basura en nuestro servidor y crear una tumble

Lo primero será hacer una tumble para asi poder optimizar el rendimiento de nuestra app al no enviar imágenes pesadas sino que enviamos imágenes siempre de un mismo tamaño en este caso en base a 300px.

Si se da el caso de que no tenemos mucho espacio en nuestro servidor, para lastima de nosotros una ves actualizamos una foto en nuestro models la anterior no se elimina sino que quedara aislada y desvinculado osea una imagen muerta para eso nos meteremos el  “save()” de nuestro models.

Y listo.. así podemos tener un completo control de nuestras imágenes.

Bueno Eso es todo por ahora señores, soy Leopoldo Montesinos espero hayan aprendido uno cosa u otro me iré para no llegar tarde al trabajo por estar tratando de subir imagen a mi servidor… Adiós.

#saladtech @leomdeveloper