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:

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!

35 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

  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

  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

  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

  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.

Deja un comentario

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