Como subir múltiples imágenes a una base de datos en android studio

Hola amigos después de haber visto como subir una imagen desde android a una base de datos en mysql  un usuario hizo una donación para hacer un tutorial explicando de forma sencilla Como subir múltiples imágenes a una base de datos en android studio
 

 

Explicación rápida: nuestra app debe de guardar los nombres de cada una de las imágenes y también poder guardar las imágenes en una carpeta de nuestra webservices.
 
Que necesitamos:
1) Base de datos en Mysql.
2) Librería Volley.
3) Librería MultiPhotoPicker del repositorio de GitHub.
4) WebServices en php con Json.
5) Muy importante una buena taza de café, algo de comer y muchas ganas de aprender.

PASO 1: Creamos nuestra base de datos, solo tendrá dos campos(id,lista_imagen) para este ejemplo, yo le llamare a mi base de datos multiimg y una tabla subir.

CREATE TABLE `subir` (
  `id` int(11) NOT NULL,
  `lista_imagen` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `subir`
  ADD PRIMARY KEY (`id`);
  ALTER TABLE `subir`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;

PASO 2: Ahora debemos crear nuestra WebService esta constara de dos archivos, una para hacer nuestra conexión y otra para subir nuestras imágenes.

config.php

<?php  
$hostname='localhost';
$username='root';
$password='12345';
$dbname='multiimg';

$json=mysql_connect($hostname, $username, $password) 
      OR DIE('¡Incapaz de conectar a la base de datos! Por favor, inténtelo de nuevo más tarde.');
mysql_select_db($dbname);
?>

subir.php

<?php   
    include('config.php');
    $json = json_decode(file_get_contents('php://input'),true);
 
    $nombre = $json["nombre"]; //las variables de los corchetes debe ser igual a los de la clase util
    $listaImagen = $json["listaImagen"];
    $i = 0;
    $yy=false;
 
    $respuesta = array();
       $imagenes=array();
    if (isset($listaImagen)) {
        if (is_array($listaImagen)) {
            foreach($listaImagen as $imagen) {
                $decodedImagen = base64_decode("$imagen");
                $return = file_put_contents("uploads/".$nombre."_".$i.".JPG", $decodedImagen);
                
                $imagenes1[$i]="uploads/".$nombre."_".$i.".JPG";
                
                if($return !== false){
             
              $respuesta['success'] = 1;
              $respuesta['message'] = "La imagen cargada con éxito";
              $yy=true;
             
            }else{
              $respuesta['success'] = 0;
              $respuesta['message'] = "Subida de imagen fallida";
            }
            $i++;
           }
        }
    } else{
        $respuesta['success'] = 0;
        $respuesta['message'] = "La lista esta vacía.";
    }
    if($yy==true)
    {
    $imagenes=json_encode($imagenes1);
    mysql_query("insert into `subir`(`lista_imagen`)values('$imagenes')");
    }
    echo json_encode($respuesta);
?>

Ahora debemos crear una carpeta juntos con nuestros otros dos archivos y tendrá como nombre uploads en esta carpeta se guardara nuestras imágenes.

PASO 3: Ahora debemos crear nuestra app muy atentos porque como ya es de costumbre los tutoriales donados no subimos el proyecto solo lo explicamos:

Debemos ir a nuestro primer buil.gradle

Debemos agregar la siguiente linea dentro de allprojects:
maven { url ‘https://jitpack.io’ }

Ahora debemos ir a nuestro segundo buil.gradle

Agregar estas tres librerías dentro de dependencies:
compile ‘com.android.support:multidex:1.0.1’
compile ‘com.github.nileshpambhar:MultiPhotoPicker:v1.2’
compile ‘com.android.volley:volley:1.0.0’

 

Ahora debemos ir a nuestro AndroidManifest y agregar estos dos permisos:
<uses-permission android:name=“android.permission.INTERNET” />
<uses-permission android:name=“android.permission.READ_EXTERNAL_STORAGE”/>

Ahora si ya podemos empezar con el código, demos ir a nuestro activity_main y crear la siguiente interfaces.

Te dejo el código del activity_main .xml en modo texto para que lo copies a tu proyecto.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androfast.pc.appsubirmultipleimagenes.MainActivity">

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

    <Button
        android:id="@+id/btnSubir"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnImagen"
        android:text="clic para cargar archivos" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_below="@+id/btnSubir"
        android:id="@+id/txtMensaje"
        android:textColor="#000000"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/etxtNombre"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txtMensaje"
        android:layout_marginTop="14dp" />

</RelativeLayout>

Ahora debemos crear una nueva clase llamada Util la cual tendrá lo siguiente:

public class Util {
    public static final String urlUpload = "http://192.168.8.133/multipleimg/subir.php";
    public static final int REQCODE = 100;
    public static final String imagenLista = "listaImagen";
    public static final String imagenNombre = "nombre";
}

Ahora debemos ir a nuestra clase MainActivity y debemos de agregar lo siguiente:

import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Base64;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.DefaultRetryPolicy;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.nileshp.multiphotopicker.photopicker.activity.PickImageActivity;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView mensaje;
    private Button subir, seleccionar;
    private EditText nombre;
    private ProgressDialog dialog = null;
    private JSONObject jsonObject;

    ArrayList<String> listaImagenes;
    ArrayList<String> listaRuta;


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

        subir = (Button)findViewById(R.id.btnSubir);
        seleccionar = (Button)findViewById(R.id.btnImagen);
        mensaje = (TextView)findViewById(R.id.txtMensaje);
        nombre = (EditText)findViewById(R.id.etxtNombre);

        seleccionar.setOnClickListener(this);
        subir.setOnClickListener(this);

        dialog = new ProgressDialog(this);
        dialog.setMessage("\n" +"Subiendo imagen...");
        dialog.setCancelable(false);

        jsonObject = new JSONObject();
        listaImagenes = new ArrayList<>();
    }

    @Override
    public void onClick(View view) {

        switch (view.getId()) {
            case R.id.btnImagen:

                Intent mIntent = new Intent(this, PickImageActivity.class);
                mIntent.putExtra(PickImageActivity.KEY_LIMIT_MAX_IMAGE, 60);
                mIntent.putExtra(PickImageActivity.KEY_LIMIT_MIN_IMAGE, 1);
                startActivityForResult(mIntent, PickImageActivity.PICKER_REQUEST_CODE);

                break;
            case R.id.btnSubir:
                dialog.show();

                JSONArray jsonArray = new JSONArray();

                if (listaImagenes.isEmpty()){
                    Toast.makeText(this, "\n" +"Seleccione algunas imágenes primero.", Toast.LENGTH_SHORT).show();
                    return;
                }

                for (String encoded: listaImagenes){
                    jsonArray.put(encoded);
                }
                try {
                    jsonObject.put(Util.imagenNombre, nombre.getText().toString().trim());
                    jsonObject.put(Util.imagenLista, jsonArray);
                } catch (JSONException e) {
                    Log.e("JSONObject aqui", e.toString());
                }
                JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.POST, Util.urlUpload, jsonObject,
                        new Response.Listener<JSONObject>() {
                            @Override
                            public void onResponse(JSONObject jsonObject) {
                                Log.e("Mensaje del servidor", jsonObject.toString());
                                dialog.dismiss();
                                mensaje.setText("\n" +"Imágenes cargadas con éxito");
                                Toast.makeText(getApplicationContext(), "Imágenes cargadas con éxito", Toast.LENGTH_SHORT).show();
                            }
                        }, new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError volleyError) {
                        Log.e("\n" +"Mensaje del servidor", volleyError.toString());
                        Toast.makeText(getApplicationContext(), "\n" +"Se produjo un error", Toast.LENGTH_SHORT).show();
                        dialog.dismiss();
                    }
                });
                jsonObjectRequest.setRetryPolicy(new DefaultRetryPolicy( 200*30000,
                        DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
                        DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
                Volley.newRequestQueue(this).add(jsonObjectRequest);
                break;
        }

    }


    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
        super.onActivityResult(requestCode, resultCode, intent);
        if (resultCode != RESULT_OK) {
            return;
        }
        if (resultCode == -1 && requestCode == PickImageActivity.PICKER_REQUEST_CODE) {
            this.listaRuta = intent.getExtras().getStringArrayList(PickImageActivity.KEY_DATA_RESULT);
            if (this.listaRuta != null && !this.listaRuta.isEmpty()) {
                StringBuilder sb=new StringBuilder("");

                listaImagenes.clear();


                for(int i = 0; i< listaRuta.size(); i++) {


                    Bitmap bitmap = null;
                    try {
                        bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(),  Uri.fromFile(new File(listaRuta.get(i))));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
                    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream);
                    String encodedImage = Base64.encodeToString(byteArrayOutputStream.toByteArray(), Base64.DEFAULT);

                    listaImagenes.add(encodedImage);


                    sb.append("Foto"+(i+1)+":"+ listaRuta.get(i));
                    sb.append("\n");
                }
            }
        }
    }
}

Ahora veamos el producto final

En nuestra Base de Datos.

En nuestra carpeta Uploads

 
SUPER IMPORTANTE: Sr. y Sra. Don Vergas les comento que soporta como un máximo de 3MB por cada subida y que pasa si superan ese peso, pues o sale un error y guarda de todas formas o en el peor de los casos se congela la aplicación.
Y que hago si la bestia de mi usuario sube imágenes como loco, tranquilo puedes validarlo para que cuando hagan eso no les permita subir o algo te ingeniaras. saludos.

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!

0

7 pensamientos sobre “Como subir múltiples imágenes a una base de datos en android studio

      1. Jefferson Medina

        Una Consulta amigo, no se que habré hecho mal, corre bien cuando la ejecuto desde el Android Studio, pero cuando extraigo la APK y la quiero instalar en el teléfono, me sale el error de que no se puede instalar. Te agradecería un millon de veces si me pudieras ayudar con ese error.

        0
  1. cesar valenzuela

    hola androfast me sirvió el código pero la hora de resivir los mensajes me marca este error Errorcom.android.volley.parseError:
    orj.json.JSONExceotion: el codigo esta como en el ejemplo anterior muchas gracias de antemano

    0
  2. Me

    Hola, me funcionó a medias. Te comento, me deja seleccionar las imágenes, se guardan en la carpeta uploads, pero solo una de todas las imágenes, y luego en la bases de datos no me aparece ninguna imagen.

    ¿Cuál podría ser el problema?

    Gracias por tus tutoriales, son de gran ayuda. Un saludo.

    0

Deja un comentario

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