Android Upload Image to Server Using PHP MySQL

Total Views : 10,387
Zoom In Zoom Out Read Later Print

In this tutorial we will upload small image files from android to server.. There two type of PHP code in this tutorial first one save image in database and seconds one save in a directory.

In this tutorial, in this android tutorial we will create a simple Android Upload Image to Server App using PHP and MySQL. If need to upload larger files like a  video check this tutorial.

Video

This Android Upload Image to Server is having two parts.

  • PHP and MySql
  • Android

Step#1

Create table using below mysql query to store image if you want to store images in database.

Query

create table images (
id int not null primary key AUTO_INCREMENT,
name varchar(50),
image BLOB
);

Use following query if you want to upload image in a directory.

Query

create table images (
id int not null primary key AUTO_INCREMENT,
name varchar(50)
);

Step#2

For all this to work we need to create two PHP files, one for database connection and one for image upload.

Connection.php

<?php
$host = "localhost"; //Host
$username = "root"; //User
$password = "manjeet"; //Password
$database = "apis";// Database Name

//creating a new connection object using mysqli
$conn = new mysqli($host, $username, $password, $database) or die("Database connection failed.") ;
?>

Use this code if you want to save in MySql database.

upload.php

<?php
if($_SERVER['REQUEST_METHOD'] =='POST'){
$image = $_POST['image'];
require_once('Connection.php');

$sql = "INSERT INTO images (image) VALUES (?)";
$stmt = mysqli_prepare($con,$sql);

mysqli_stmt_bind_param($stmt,"s",$image);
mysqli_stmt_execute($stmt);

$check = mysqli_stmt_affected_rows($stmt);

if($check == 1){
echo "Image Uploaded Successfully";
}else{
echo "Error Uploading Image";
}
mysqli_close($con);
} else {
echo "Error";
}
?>

Use this code if you want to save in a directory.

upload.php

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$ImageData = $_POST['image'];
$ImageName = $_POST['name'];

$ImagePath = "upload/$ImageName";

$insertSQL = "INSERT INTO images (name) values('$ImageName')";

if(mysqli_query($conn, $insertSQL)){
file_put_contents($ImagePath,base64_decode($ImageData));
echo "Your Image Has Been Uploaded.";
}

mysqli_close($conn);
} else {
echo "Please Try Again";
}
?>


Step#3 Android Part

  • Open android studio and create a new android project.
  • Firstly we will create a new class to handle our Http Request.
  • Write the following code

RequestHandler.java

package com.prodevsblog.imageupload;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.io.UnsupportedEncodingException;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;

import javax.net.ssl.HttpsURLConnection;

public class RequestHandler {

public String postRequest(String requestURL, HashMap<String, String> postDataParams) {
URL url;
String response = "";
try {
url = new URL(requestURL);

HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setReadTimeout(15000);
conn.setConnectTimeout(15000);
conn.setRequestMethod("POST");
conn.setDoInput(true);
conn.setDoOutput(true);


OutputStream os = conn.getOutputStream();
BufferedWriter writer = new BufferedWriter(
new OutputStreamWriter(os, "UTF-8"));
writer.write(getPostDataString(postDataParams));

writer.flush();
writer.close();
os.close();
int responseCode = conn.getResponseCode();

if (responseCode == HttpsURLConnection.HTTP_OK) {
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
response = br.readLine();
} else {
response = "Error Registering";
}
} catch (Exception e) {
e.printStackTrace();
}

return response;
}

private String getPostDataString(HashMap<String, String> params) throws UnsupportedEncodingException {
StringBuilder result = new StringBuilder();
boolean first = true;
for (Map.Entry<String, String> entry : params.entrySet()) {
if (first)
first = false;
else
result.append("&");

result.append(URLEncoder.encode(entry.getKey(), "UTF-8"));
result.append("=");
result.append(URLEncoder.encode(entry.getValue(), "UTF-8"));
}
return result.toString();
}
}

MainActivity.java

package com.prodevsblog.imageupload;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.AsyncTask;
import android.provider.MediaStore;
import android.provider.OpenableColumns;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Base64;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.net.URI;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

public static final String UPLOAD_URL = "http://192.168.43.199/upload.php";
public static final String UPLOAD_KEY = "image";

private int PICK_IMAGE_REQUEST = 1;

private Button buttonChoose;
private Button buttonUpload;

private ImageView imageView;
private Bitmap bitmap;
private Uri filePath;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init(){
buttonChoose = findViewById(R.id.btnChoose);
buttonUpload = findViewById(R.id.btnUpload);

imageView = findViewById(R.id.imageView);

buttonChoose.setOnClickListener(this);
buttonUpload.setOnClickListener(this);
}
private void showFileChooser() {
Intent intent = new Intent();
intent.setType("image/*");
intent.setAction(Intent.ACTION_GET_CONTENT);
startActivityForResult(Intent.createChooser(intent, "Select Picture"), 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) {
filePath = data.getData();
try {
bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
imageView.setImageBitmap(bitmap);
} catch (IOException e) {
e.printStackTrace();
}
}
}

public String getStringImage(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(){
class UploadImage extends AsyncTask<Bitmap,Void,String>{
ProgressDialog loading;
RequestHandler rh = new RequestHandler();

@Override
protected void onPreExecute() {
super.onPreExecute();
loading = ProgressDialog.show(MainActivity.this, "Uploading Image", "Please wait...",true,true);
}

@Override
protected void onPostExecute(String s) {
super.onPostExecute(s);
loading.dismiss();
Toast.makeText(getApplicationContext(),s,Toast.LENGTH_LONG).show();
}

@Override
protected String doInBackground(Bitmap... params) {
Bitmap bitmap = params[0];
String uploadImage = getStringImage(bitmap);

HashMap<String,String> data = new HashMap<>();
data.put(UPLOAD_KEY, uploadImage);
data.put("name",getFileName(filePath));

String result = rh.postRequest(UPLOAD_URL,data);
return result;
}
}

UploadImage ui = new UploadImage();
ui.execute(bitmap);
}

@Override
public void onClick(View v) {
if (v == buttonChoose) {
showFileChooser();
}
if(v == buttonUpload){
if(filePath!=null) {
uploadImage();
} else {
Toast.makeText(MainActivity.this,"Select Image",Toast.LENGTH_LONG).show();
}
}
}
String getFileName(Uri uri){
String result = null;
if (uri.getScheme().equals("content")) {
Cursor cursor = getContentResolver().query(uri, null, null, null, null);
try {
if (cursor != null && cursor.moveToFirst()) {
result = cursor.getString(cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME));
}
} finally {
cursor.close();
}
}
if (result == null) {
result = uri.getPath();
int cut = result.lastIndexOf('/');
if (cut != -1) {
result = result.substring(cut + 1);
}
}
return result;
}
}

activity_main.xml

<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="fill_parent"
android:layout_height="wrap_content"
android:text="@string/string_choose_file"
android:id="@+id/btnChoose" />

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


<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/string_upload_image"
android:id="@+id/btnUpload" />

</LinearLayout>

Progress Dialog is deprecated (Solution)

Since the ProgressDialog is deprecated from the Android version O,  you can use progressbar.

dialog.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="20dp">
    <ProgressBar
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="4"
        android:gravity="center"
        android:text="Please wait! " />
</LinearLayout>

Java Code

// Create a dialog 
AlertDialog.Builder builder = new AlertDialog.Builder(context);
builder.setCancelable(false); // if you want user to wait for some process to finish,
builder.setView(R.layout.layout_loading_dialog);
AlertDialog dialog = builder.create();

progress_dialog.show(); // to show this dialog
progress_dialog.dismiss(); // to hide this dialog

Cleartext HTTP Traffic (Android P)

You can use one of following two method to use http urls in you project.

Option #1

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>
Option #2

res/xml/network_security.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">Your URL(ex: 127.0.0.1)</domain>
    </domain-config>
</network-security-config>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:networkSecurityConfig="@xml/network_security"
        ...>
        ...
    </application>
</manifest>

See More

Latest Photos