Antes que te vayas
Inscríbete en nuestro curso gratuito de Laravel
El día de hoy vamos a ver cómo subir una imagen desde Android a nuestro servidor web a través de nuestra API.
Vamos a asumir que ya tenemos la imagen de nuestro interés en un objeto Bitmap.
La imagen la puedes obtener de múltiples formas. Por ejemplo:
Si no sabes cómo lograr esto, asegúrate de suscribirte al canal de YouTube, que pronto agregaré tutoriales para cada uno de estos casos.
En nuestro proyecto Laravel debemos crear una ruta para subir la imagen. Sobre esta ruta haremos una petición POST, enviando la imagen en formato Base64.
Para este ejemplo vamos a subir una imagen de perfil.
Es por eso que:
$user
.image
presente en nuestro request.$imageContent
, en la ruta $fullPath
que definimos previamente.photo
(tabla users
), para el usuario que está actualizando su imagen de perfil.public function updateImage(Request $request)
{
$user = Auth::guard('api')->user();
$imageName = $this->randomImageName();
$fullPath = public_path('/uploaded/' . $imageName);
$image = $request->image; // base64 encoded
$imageContent = $this->imageBase64Content($image);
File::put($fullPath, $imageContent);
$user->photo = $imageName;
$user->save();
return $user;
}
Ten en cuenta que esto es un ejemplo. En tu caso:
image
para el campo que viene en la petición POST.Del código anterior, aquí tienes los 2 métodos que hacen falta:
private function imageBase64Content($image) {
$image = str_replace('data:image/png;base64,', '', $image);
$image = str_replace(' ', '+', $image);
return base64_decode($image);
}
private function randomImageName() {
return Str::random(10) . '.' . 'png';
}
Ten en cuenta que guardamos la imagen en nuestro servidor, y luego en la base de datos solo guardamos el nombre del archivo.
Si bien no es necesario definir un mecanismo de autenticación para tu API, es lo más recomendable. Aquí puedes ver cómo agregar un sistema de autenticación para tu API en Laravel usando Passport.
Una vez que tenemos lista nuestra API, sólo nos queda hacer una petición POST desde Android, para subir nuestra imagen.
private fun postUserImage(bitmap: Bitmap) {
val call = apiService.postUserImage(
authHeader, bitmap.toBase64()
)
call.enqueue(object: Callback<User> {
override fun onFailure(call: Call<User>, t: Throwable) {
context?.toast(t.localizedMessage)
}
override fun onResponse(call: Call<User>, response: Response<User>) {
if (response.isSuccessful) {
context?.toast(getString(R.string.successful_avatar_updated))
val user = response.body()
user?.let {
Picasso.get()
.load(user.photoUrl)
.transform(CircleTransform())
.into(ivProfileImage)
}
} else {
context?.toast(getString(R.string.error_server_response))
}
}
})
}
En este ejemplo, para hacer la petición POST usamos Retrofit.
Puedes leer este artículo sobre cómo consumir una API desde Android con Retrofit. Allí vemos cómo definir un API Service.
@POST("user/image")
@Headers("Accept: application/json")
@FormUrlEncoded
fun postUserImage(
@Header("Authorization") authHeader: String,
@Field("image") base64Image: String
): Call<User>
Básicamente estamos haciendo una petición a través del método postUserImage
de nuestro API Service y enviando 2 argumentos:
Te preguntarás cómo es posible ejecutar: bitmap.toBase64()
.
Lo que ocurre es que en Kotlin tenemos extension functions. Es decir, podemos extender clases y agregar métodos adicionales.
En este caso, a la clase Bitmap, le agregué un método toBase64
:
fun Bitmap.toBase64(): String {
val stream = ByteArrayOutputStream()
compress(Bitmap.CompressFormat.JPEG, 70, stream)
return Base64.encodeToString(stream.toByteArray(), Base64.NO_WRAP)
}
Una vez hecha la petición, en cuanto el servidor responda, vamos a ejecutar onResponse
o bien onFailure
, dependiendo de si el request se pudo llevar a cabo.
Si la respuesta es exitosa, mostramos un Toast (un mensaje flotante) al usuario y así mismo le mostramos en pantalla la imagen que ha subido.
Esto último, haciendo uso de Picasso. Adicionalmente, en mi caso también definí un CircleTransform()
para mostrar la imagen en formato circular.
Como ves, subir una imagen y mostrarla finalmente al usuario no es nada de otro mundo.
Si quieres aprender más sobre Android y Kotlin, y cómo organizar tus proyectos, te invito a inscribirte al curso de Android y Laravel que tengo publicado ?
Comparte este post si te fue de ayuda 🙂.
Cualquier duda y/o sugerencia es bienvenida.
Regístrate
Inicia sesión para acceder a nuestros cursos y llevar un control de tu progreso.
Cursos recomendados
Aprende Laravel desde cero y desarrolla aplicaciones web reales, en tiempo récord, de la mano de Laravel.
Ingresar al cursoActualiza tus proyectos desde cualquier versión hasta la última versión estable de Laravel.
Ingresar al cursoDesarrollemos un Messenger! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho más.
Ingresar al cursoInscríbete en nuestro curso gratuito de Laravel