jueves, 13 de abril de 2017

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 = "http://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 ="http://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:

  Link de la descarga
Programador alfa, lomo plateado, barba de clavos, mentón de roca, no descarga la aplicación sigue el tutorial. Clic para DESCARGAR

     
ENLACES DE INTERÉS:

AndroFast

Programo algunas cosas por diversion, me gusta aprender cosas nuevas y estoy pendiente de todo lo que tenga que ver con tecnologia. Este blog lo cree para todas las personas que tengan dificultades en la programacion, para ser sincero nunca fui bueno y reprobe algunos cursos de programacion, pero mis ganas de aprender pudieron más. SI YO PUEDO TU PUEDES ANIMO!

Necesito tu Ayuda, dale en compartir para crecer como comunidad.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin

21 comentarios:

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

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

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

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

    ResponderEliminar
    Respuestas
    1. Buenas, puede explicar mejor lo que desea?

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

      Eliminar
    3. Aquí hay un ejemplo http://android-morefast.blogspot.pe/2017/08/como-utilizar-la-camara-del-celular-en.html

      Eliminar
  5. 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

    ResponderEliminar
  6. Muchas
    gracias...pero revisando y revisando lo encontre pero nuevamente gracias muy bueno

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

    ResponderEliminar
  8. 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

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

    ResponderEliminar

 

Copyright @ 2015 AndroFast.

Designed by Draganus | AndroFast