Upload Image Dari Android Dengan HTTP Multipart ~ Bagi Bagi

Pada postingan sebelumnya kita telah mempelajari bagaimana meload image dari url di android. Nah sekarang kita coba implementasikan hal yang sebaliknya, yaitu upload image ke url tertentu. Karena kita mengirim gambar ke url tertentu maka kita juga perlu menyiapkan server sidenya. Kita gunakan yang paling simple aja yaitu PHP. Untuk teknologi multipart ini file gambar yang akan dikirim dipecah pecah menjadi beberapa bagian, sehingga ketika ada koneksi putuh tetap bisa berjalan jika koneksi tersambung kembali. Ah daripada panjang lebar langsung dicoba aja deh.Tapi sebelum itu siapin XAMPP dan folder lokasi upload Open-mouthed smile

Langkah awal yang kita lakukan adalah menyiapkan bagian servernya.Buat folder bernama imageupload di direktori htdocs(xampp) dan buat folder upload serta file upload.php di dalamnya. Berikut script untuk menangkap file yang dikirim dari android. letakkan di file upload.php

<?php
$target_path = "./upload/";
$target_path = $target_path . basename( $_FILES['uploaded']['name']);
if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploaded']['name']).
" has been uploaded";
} else{
echo "Gagal Bung!";
}
?>

Setelah itu download library httpclient-4.2.3 dan httpmime-4.2.3 di http://hc.apache.org/downloads.cgi atau bisa juga langsung ambil di project yang saya upload pada postingan ini. Disana sudah saya sediakan lengkap kok Open-mouthed smile . Setelah di download add ke build path pada project anda.

Nah, sekarang kita mulai ke Androidnya. Buat project baru di Android dengan nama AndroidImageUpload(untuk nama dan package terserah anda disini hanya berupa contoh). Kemudian copykan kode berikut ke main activitynya

package com.eepis.android;

import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Bitmap.CompressFormat;
import android.provider.MediaStore;

import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.mime.HttpMultipartMode;
import org.apache.http.entity.mime.MultipartEntity;
import org.apache.http.entity.mime.content.ByteArrayBody;
import org.apache.http.entity.mime.content.StringBody;
import org.apache.http.impl.client.DefaultHttpClient;

public class AndroidImageUploadActivity extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
    Button upload,add;
    TextView status;
    EditText nama;

    //variable for upload data into http
    HttpURLConnection connection = null;
    DataOutputStream outputStream = null;
    DataInputStream inputStream = null;

    Bitmap bm;

    static String pathToOurFile = "",format;
    String urlServer = "http://10.0.2.2/imageupload/upload.php";
    String lineEnd = "\r\n",twoHyphens = "--",boundary = "*****";

    private static final int SELECT_PICTURE = 0;

    int bytesRead, bytesAvailable, bufferSize;
    byte[] buffer;
    int maxBufferSize = 1*1024*1024;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        upload=(Button)findViewById(R.id.btnChooseImage);
        upload.setOnClickListener(this);
        add=(Button)findViewById(R.id.btnAddImage);
        add.setOnClickListener(this);
        status=(TextView)findViewById(R.id.txtStatusGambar);
        nama=(EditText)findViewById(R.id.editNama);
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.btnChooseImage:
            Intent intent = new Intent();
            intent.setType("image/*");
            intent.setAction(Intent.ACTION_GET_CONTENT);
            startActivityForResult(Intent.createChooser(intent, "Select Picture"),SELECT_PICTURE);
            break;
        case R.id.btnAddImage:
            try {
                bm = BitmapFactory.decodeFile(pathToOurFile);
                executeMultipartPost();
                } catch (Exception e) {
                    Log.e(e.getClass().getName(), e.getMessage());
                }
            break;
        default:
            break;
        }
    }

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            status.setText(data.getData().toString());
            String[] projection = { MediaStore.Images.Media.DATA };

            Cursor cursor = managedQuery(data.getData(), projection, null, null, null);
            int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
            cursor.moveToFirst();
            String filePath = cursor.getString(column_index);
            cursor.close();
            pathToOurFile=filePath;
            format = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length());
        }
    }
    public void executeMultipartPost() throws Exception {
        try {
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            bm.compress(CompressFormat.JPEG, 75, bos);
            byte[] data = bos.toByteArray();
            HttpClient httpClient = new DefaultHttpClient();
            HttpPost postRequest = new HttpPost(urlServer);
            ByteArrayBody bab = new ByteArrayBody(data, nama.getText().toString()+"."+format);
            MultipartEntity reqEntity = new MultipartEntity(
                    HttpMultipartMode.BROWSER_COMPATIBLE);
                    reqEntity.addPart("uploaded", bab);
                    reqEntity.addPart("photoCaption", new StringBody("sfsdfsdf"));
                    postRequest.setEntity(reqEntity);
                    HttpResponse response = httpClient.execute(postRequest);
                    BufferedReader reader = new BufferedReader(new InputStreamReader(
                            response.getEntity().getContent(), "UTF-8"));
                            String sResponse;
                            StringBuilder s = new StringBuilder();

                            while ((sResponse = reader.readLine()) != null) {
                                s = s.append(sResponse);
                            }
                            Toast.makeText(this, "Penambahan data berhasil", 1).show();
                            System.out.println("Response:—————————————————————————————————————————-> " + s);
        } catch (Exception e) {
            // handle exception here
            Log.e(e.getClass().getName(), e.getMessage());
        }
    }
}

berikut file xml layoutnya

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="10dp" >

jangan lupa tambahkan permission di manifest

<uses-permission android:name="android.permission.INTERNET" />

Hasil tampilan aplikasi

nah muncul deh di direktori upload dengan nama tes

Demikianlah tutorial kali ini semoga bisa bermanfaat buat kawan kawan sekalian. Untuk source projectnya bisa di download di alamat berikut

DOWNLOAD

Setelah banyak bermain main dengan networking di Android sekarang balik ke localnya ya. Untuk postingan berikutnya adalah mengenai pemanfaatan swipe di Android Apps. Secara gitu namanya aplikasi touchscreen kalo ndak pake swipe kan kurang Greget gitu(kata Mad Dod Smile ) nah jadi next post kita akan mencoba bagaimana membuat scroller view secara horizontal dengan ViewPager. So Keep Update ya Open-mouthed smile