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:

Hola soy Alex Céspedes  fundador de ANDROFAST, programo algunas cosas por diversión, me gusta aprender cosas nuevas y estoy pendiente de todo lo que tenga que ver con tecnología. Este blog lo cree para todas las personas que tengan dificultades en la programación, para ser sincero nunca fui bueno y reprobé algunos cursos de programación, pero mis ganas de aprender pudieron más. SI YO PUEDO TU PUEDES ANIMO!

1+

42 pensamientos sobre “como subir una imagen desde android a una base de datos en mysql

  1. Andres Alzate

    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
  2. juanyyto

    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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Celso

    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
    1. ANDROFAST Autor del artículo

      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
  9. 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

Deja un comentario

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