como subir una imagen desde android a una base de datos en mysql


Hola amigos y amigas programadores les traigo un nuevo tutorial de como subir una imagen desde android a una base de datos en mysql.
A pedido de un subscriptor de youtube vamos hacerlo, algo rápido porque ando de vacaciones, si no les queda muy claro solo me escriben:

PASO: 1   Crear nuestra Web Services

Bien para este tuto haremos nuestra ws en la nube 🙂  utilizare el hosting gratuito webcindario:
y debemos crear nuestra base de datos con tres campos, como se muestra en la siguiente imagen

CREATE TABLE IF NOT EXISTS `frutas` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `foto` varchar(400) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
)
Ahora debemos crear nuestro archivo dbConnect.php

<?php 
 define('HOST','mysql.webcindario.com');
 define('USER','usuario del hosting');
 define('PASS','pass del usuario');
 define('DB','nombre de base de datos');
 
 $con = mysqli_connect(HOST,USER,PASS,DB) 
 or die('unable to connect to db');
Recuerda que los datos debes cambiarlo según el lugar donde tengas tu base de datos:
Ahora debemos de crear nuestro archivo upload.php

<?php
 
 if($_SERVER['REQUEST_METHOD']=='POST'){
 
 $imagen= $_POST['foto'];
                $nombre = $_POST['nombre'];
 
 require_once('dbConnect.php');
 
 $sql ="SELECT id FROM frutas ORDER BY id ASC";
 
 $res = mysqli_query($con,$sql);
 
 $id = 0;
 
 while($row = mysqli_fetch_array($res)){
 $id = $row['id'];
 }
 
 $path = "uploads/$id.png";
 
 $actualpath = "https://servermorefast.webcindario.com/ImagenConNombre/$path";
 
 $sql = "INSERT INTO frutas (foto,nombre) VALUES ('$actualpath','$nombre')";
 
 if(mysqli_query($con,$sql)){
 file_put_contents($path,base64_decode($imagen));
 echo "Subio imagen Correctamente";
 }
 
 mysqli_close($con);
 }else{
 echo "Error";
 }
 Esos dos archivos deben subirlo a su hosting o servidor local y aparte deben crear una carpeta llamada uploads donde se guardara las imágenes y quedara como en la siguiente imagen.
 
 
 
PARTE 2: Ahora toca meter mano a la aplicación en android, nuestro activity_main.xml tendra lo siguiente

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Elegir imagen"
        android:id="@+id/btnBuscar" />


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/imageView" />


    <EditText
        android:id="@+id/editText"
        android:hint="Ingresa un Nombre"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Subir Imagen"
        android:id="@+id/btnSubir" />


</LinearLayout>
Y por ultimo nuestro MainActivity.java 

public class MainActivity extends AppCompatActivity implements View.OnClickListener  {

    private Button btnBuscar;
    private Button btnSubir;

    private ImageView imageView;

    private EditText editTextName;

    private Bitmap bitmap;

    private int PICK_IMAGE_REQUEST = 1;

    private String UPLOAD_URL ="https://serverandrofast.webcindario.com/upload.php";

    private String KEY_IMAGEN = "foto";
    private String KEY_NOMBRE = "nombre";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnBuscar = (Button) findViewById(R.id.btnBuscar);
        btnSubir = (Button) findViewById(R.id.btnSubir);

        editTextName = (EditText) findViewById(R.id.editText);

        imageView  = (ImageView) findViewById(R.id.imageView);

        btnBuscar.setOnClickListener(this);
        btnSubir.setOnClickListener(this);
    }

    public String getStringImagen(Bitmap bmp){
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        bmp.compress(Bitmap.CompressFormat.JPEG, 100, baos);
        byte[] imageBytes = baos.toByteArray();
        String encodedImage = Base64.encodeToString(imageBytes, Base64.DEFAULT);
        return encodedImage;
    }

    private void uploadImage(){
        //Mostrar el diálogo de progreso
        final ProgressDialog loading = ProgressDialog.show(this,"Subiendo...","Espere por favor...",false,false);
        StringRequest stringRequest = new StringRequest(Request.Method.POST, UPLOAD_URL,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String s) {
                        //Descartar el diálogo de progreso
                        loading.dismiss();
                        //Mostrando el mensaje de la respuesta
                        Toast.makeText(MainActivity.this, s , Toast.LENGTH_LONG).show();
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError volleyError) {
                        //Descartar el diálogo de progreso
                        loading.dismiss();

                        //Showing toast
                        Toast.makeText(MainActivity.this, volleyError.getMessage().toString(), Toast.LENGTH_LONG).show();
                    }
                }){
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                //Convertir bits a cadena
                String imagen = getStringImagen(bitmap);

                //Obtener el nombre de la imagen
                String nombre = editTextName.getText().toString().trim();

                //Creación de parámetros
                Map<String,String> params = new Hashtable<String, String>();

                //Agregando de parámetros
                params.put(KEY_IMAGEN, imagen);
                params.put(KEY_NOMBRE, nombre);

                //Parámetros de retorno
                return params;
            }
        };

        //Creación de una cola de solicitudes
        RequestQueue requestQueue = Volley.newRequestQueue(this);

        //Agregar solicitud a la cola
        requestQueue.add(stringRequest);
    }

    private void showFileChooser() {
        Intent intent = new Intent();
        intent.setType("image/*");
        intent.setAction(Intent.ACTION_GET_CONTENT);
        startActivityForResult(Intent.createChooser(intent, "Select Imagen"), PICK_IMAGE_REQUEST);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data != null && data.getData() != null) {
            Uri filePath = data.getData();
            try {
                //Cómo obtener el mapa de bits de la Galería
                bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
                //Configuración del mapa de bits en ImageView
                imageView.setImageBitmap(bitmap);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    @Override
    public void onClick(View v) {

        if(v == btnBuscar){
            showFileChooser();
        }

        if(v == btnSubir){
            uploadImage();
        }
    }
}
Ahora debemos agregar la libreria volley a dependencias en buil.gradle

 

compile 'com.mcxiaoke.volley:library-aar:1.0.0'
 
quedaría algo así

 

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:23.0.1'

    compile 'com.mcxiaoke.volley:library-aar:1.0.0'

}

 

Y por ultimo un permiso en el AndroidManifest

<uses-permission android:name="android.permission.INTERNET"/>
 
 
El producto final seria lo siguiente:
 
EN EL ANDROID
 
   

 

 
 
EN EL SERVIDOR
 
 
Las imágenes se guardan en la BD con el nombre original y en la carpeta uploads con un numero, de esa forma aunque se repitan de nombre las fotos, no se chancaran al momento de cargarlos.

Igual si piensas que hablo escribo en chino te dejo el ejercicio:

     
ENLACES DE INTERÉS:
1+

¿Tiene alguna pregunta o comentario?

52 comments on “como subir una imagen desde android a una base de datos en mysql

Excelente, funciona muy bien, me fue de gran ayuda muchas gracias amigo..

1+
Reply

Que bueno que le sirvió.

0
Reply

Excelente muy bueno!!!

0
Reply

Que bueno que le sirvió, saludos.

0
Reply

Excelente trabajo, no quiero dejar el Tutorial sin agradecerlo. Saludos

0
Reply

Que bueno que le sirvió, saludos.

0
Reply

de que tamaña maximo se pueden subir las imagenes?

0
Reply

Porque no te da la opción de abrir la cámara ? Lo demás de 10 GRACIAS

0
Reply

Buenas, puede explicar mejor lo que desea?

0
Reply

Solo permite subir imágenes de la galería, me gustaría si es posible que me de la opción de elegir si tomar una foto con la cámara o elegir una imagen de la galería
GRACIAS

0
Reply

gracias por el tutorial…muy muy bueno, la aplicación me funciona bien , pero no he podido ver el error en mi servidor en cpanel…gracias

0
Reply

Muchas
gracias…pero revisando y revisando lo encontre pero nuevamente gracias muy bueno

0
Reply

Hola..muy buen tutorial..me sirvió mucho..Quisiera saber si es limitado el tamaño de las imagenes y ocasiona bloqueos en la aplicacion ?..ah y otra cosa, por que en ocasiones al darle subir..queda repetida en el servidor y en la base de datos ?es decir, se carga dos veces con solo darle una vez a subir

0
Reply
Uriel Velázquez

Hola, me paso lo mismo amigo. Pudiste resolver tu error?, te agradecería mucho tu ayuda.

0
Reply
Pudie

Pudieron resolver el error?

0
Reply

que tal, generé mi proyecto identico y probé el de descarga de igual manera, al correr el proyecto en mi celular para probar, me muestra exactamente el codigo que tengo en upload.php en la linea Toast.makeText(MainActivity.this, s , Toast.LENGTH_LONG).show();sabran a que se deba? estoy probando en un MOTO G5

0
Reply

Este comentario ha sido eliminado por el autor.

0
Reply

hola, oye cuando cuando dice subiendo imagen despues de unos segundos cierra la aplicacion que problema podria se?

0
Reply

Este comentario ha sido eliminado por el autor.

0
Reply

mil gracias eres el mejor amigo

0
Reply

¿Cómo haría para subir más de una imagen en un envío?
Gracias

0
Reply

Que bueno que le sirvió, saludos

0
Reply
Antonio

Gracias por el aporte estube revisando pero no me funciona si guarda los valores en la base de datos pero la imagen no aparece en la carpeta especificada

0
Reply
Antonio

Eran los permisos de mi servidor ya que trabajo en Linux gracias

0
Reply

Suele pasar amigo, saludos.

0
Reply
Hugo Soto

Disculpa, seguí tu tutorial, uso el host 000webhost pero cuando doy subir imagen se detiene la aplicación, soy nuevo en esto y no sé que pueda estar pasando :c

0
Reply

Hola Hugo es muy poca la información que das te sugiero que pidas ayuda dándonos mas detalles a nuestro correo [email protected]

0
Reply

Hola, muy buen trabajo amigo, justo quería algo como esto, me has salvado la vida.

Habría la opción de activar para seleccionar varias imágenes a la vez y guardarlas?.

0
Reply
mike2018

super bueno acabo de hacerlo me pincha a la perfeccion, muyyyyyyyyy bien echo este tutorial, con muchos detalles(pusiste hasta los archivos php), de hecho ya lo modifique para mi uso en el trabajo, gracias.

0
Reply
xavier espinosa

Hola buenas noches, primero pues muchas gracias por el tuto neta que si me ha funcionado mucho pero tengo algunas dudas, primero no se porqué pero cuando subo una imagen y el texto se sube 2 veces. Y la otra es que quisiera leer los archivos tanto texto cmo la imagen y mostrarla en otro layout tipo consulta pero al ejecutar me muestra perfectamente bien el texto almacenado pero no así la imagen. Nunca la carga. estoy usando esto como servicio

Este comentario fue editado(no se acepta código por este medio) hay una sección de ayuda, que puede revisarla.

0
Reply

1. Su error de texto de 2 veces difícil saberlo, con poca información.
2. le dejare un link de como mostrar el nombre y la imagen extraido de una BD.
https://www.androfast.com/2018/01/como-extraerdescargar-imagenes-desde.html

0
Reply
Ismayang

Muy buena explicacion solo que tengo un problema, al momento de oprimir el boton de subir me guarda la imagen 2 veces no se ah que se deba esto, es el unico error que tengo me podrias ayudar? lo agradeceria mucho

0
Reply
PEDRO IVAN REYES CLETO

Amigo, excelente código muy completo te agradezco mucho, solo que yo pondré el código para subir la imagen pero en un fragment, como quedaría? te puedo mandar mi fragment a un correo que me des.

0
Reply

En la pestaña pedir ayuda esta el correo

0
Reply

Hola

Una pregunta y si en vez de que se envien a la BD quiero que se envíen a una carpeta de mi computadora, que es lo que tengo que hacer?

Saludos

0
Reply

A la Bd solo se envía el nombre de la imagen, la imagen física va a una carpeta del servidor, en todo caso podrías hacer un servidor casero en tu pc y abrir los puertos de tu moden para que tu app pueda enviar las imágenes desde cualquier lugar hacia tu pc, saludos.

0
Reply
Jose Clemente

El código para seleccionar una imagen no me deja poner una del Drive o galería.

Gracias, espero tu respuesta.

Un saludo.

0
Reply
Edwin Stiven

Tengo una duda, como le puso a la foto un tipo de dato varchar en la BD,, he leido que deben ser BLOB estoy confundido

0
Reply

Aquí solo guardamos el nombre de donde se guarda la imagen, por eso es una cadena (varchar)

0
Reply
Bastian Berrios

Saludos, tengo un problema resulta que al momento de subir la imagen en la carpeta uploads se guarda un archivo (por ejemplo 1.png) de tamaño 0,1 KB a que se puede deber el error ?, en la base se datos se guarda correctamente la dirección en donde se encuentra la imagen, incluso he utilizado la aplicación Postman para enviar las imágenes y sigue ocurriendo el mismo problema. Gracias de antemano por la respuesta.

0
Reply

Hola, Estoy tratando de hacer el ejercicio del video y haciendo un paso a paso encuentro que cuando ejecuta

final ProgressDialog loading = ProgressDialog.show(this,”Subiendo…”,”Espere por favor…”,false,false);………..

se detiene la aplicación,.

Estoy trabajando jetbrains-studio.

Que pude haber hecho mal o me falta algo?

0
Reply
rolando

alguien puede ayudarme, las imagenes no se guardan en la carperta pero en la base de datos esta la direccion y todo ayuda

0
Reply
Jeesús

Que plataforma utiliza para programar? y como lo compila en el telefono?

0
Reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *