Upload an image using Google Volley

Asked 3/4, 2015 at 10:39 Answered 10/4, 2016 at 22:8

I would need to upload an image from the application, that I'm developing, to the server and I would like to know how I can develop the Multipart Request to load the image using Google Volley.

Thanks

Mariquilla answered 3/4, 2015 at 10:39 Comment(0)

I have an example to upload images by Google Volley. Take a look:

package net.colaborativa.exampleapp.api;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.nio.charset.Charset;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;

import org.apache.http.entity.ContentType;
import org.apache.http.entity.mime.HttpMultipartMode;
import org.apache.http.entity.mime.MultipartEntityBuilder;

import com.android.volley.AuthFailureError;
import com.android.volley.NetworkResponse;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.Response.ErrorListener;
import com.android.volley.Response.Listener;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.HttpHeaderParser;

public class PhotoMultipartRequest<T> extends Request<T> {


private static final String FILE_PART_NAME = "file";

private MultipartEntityBuilder mBuilder = MultipartEntityBuilder.create();
private final Response.Listener<T> mListener;
private final File mImageFile;
protected Map<String, String> headers;

public PhotoMultipartRequest(String url, ErrorListener errorListener, Listener<T> listener, File imageFile){
    super(Method.POST, url, errorListener);

    mListener = listener;
    mImageFile = imageFile;

    buildMultipartEntity();
}

@Override
public Map<String, String> getHeaders() throws AuthFailureError {
    Map<String, String> headers = super.getHeaders();

    if (headers == null
            || headers.equals(Collections.emptyMap())) {
        headers = new HashMap<String, String>();
    }

    headers.put("Accept", "application/json");

    return headers;
}

private void buildMultipartEntity(){
    mBuilder.addBinaryBody(FILE_PART_NAME, mImageFile, ContentType.create("image/jpeg"), mImageFile.getName());
    mBuilder.setMode(HttpMultipartMode.BROWSER_COMPATIBLE);
    mBuilder.setLaxMode().setBoundary("xx").setCharset(Charset.forName("UTF-8"));
}

@Override
public String getBodyContentType(){
    String contentTypeHeader = mBuilder.build().getContentType().getValue();
    return contentTypeHeader;
}

@Override
public byte[] getBody() throws AuthFailureError{
    ByteArrayOutputStream bos = new ByteArrayOutputStream();
    try {
        mBuilder.build().writeTo(bos);
    } catch (IOException e) {
        VolleyLog.e("IOException writing to ByteArrayOutputStream bos, building the multipart request.");
    }

    return bos.toByteArray();
}

@Override
protected Response<T> parseNetworkResponse(NetworkResponse response) {
    T result = null;
    return Response.success(result, HttpHeaderParser.parseCacheHeaders(response));
}

@Override
protected void deliverResponse(T response) {
    mListener.onResponse(response);
}
}

And you can use it like this:

RequestQueue mQueue = Volley.newRequestQueue(context);
PhotoMultipartRequest imageUploadReq = new PhotoMultipartRequest(url, ErrorListener, Listener, imageFile);
mQueue.add(imageUploadReq);

I hope these codes will inspire you.

Lounging answered 3/4, 2015 at 10:50 Comment(10)

Thanks for the answer. I imported your code in my application, but I get an error for the following libraries:

import org.apache.http.entity.ContentType; import org.apache.http.entity.mime.HttpMultipartMode; import org.apache.http.entity.mime.MultipartEntityBuilder;

What libraries should I import? Thanks – Mariquilla 3/4, 2015 at 11:6

go official website of Apache, and then download httpclient_x.x.x.zip, and then uncompress this zip file to get httpclient_x.x.x.jar, then add it into libs of your project. – Lounging 3/4, 2015 at 11:18

I imported the library that you told me, but when it runs the Multipart is launched the following exception: java.lang.NoSuchFieldError: org.apache.http.message.BasicHeaderValueFormatter.INSTANCE – Mariquilla 3/4, 2015 at 11:35

Can you please provide a sample of your code how u used this class PhotoMultipartRequest to upload an image. thank you – Livestock 17/7, 2015 at 3:59

i have to post the image with the param name ?imageFile = , where i have to specify this – Unassailable 3/9, 2015 at 4:55

From where did you copied pasted this code?? I got this error : java.lang.NoSuchFieldError: No static field INSTANCE of type Lorg/apache/http/message/BasicHeaderValueFormatter; in class Lorg/apache/http/message/BasicHeaderValueFormatter; or its superclasses (declaration of 'org.apache.http.message.BasicHeaderValueFormatter' appears in /system/framework/ext.jar) – Leticia 26/9, 2015 at 10:24

Try different version of httpclient.jar. API varies a little bit with versions. – Lounging 28/9, 2015 at 2:6

well, httpmime is deprecated and we i no longer use it..!!! can update a solution without using httpmime library – Functional 4/12, 2015 at 6:57

This code gives me a null response in my Response.Listener. Has anyone been able to fix this? – Sewan 3/8, 2016 at 15:57

mBuilder.build().getContentType().getValue(); and mBuilder.build().writeTo(bos); can't be resolved?! Explicit the .getContetnType() and the .writeTo() part. – Hornswoggle 28/8, 2016 at 14:38

@silverknight's answer works, however, I also had to add the following in build.gradle to resolve httpcomponents dependencies:

android {

    ...

    // have to exclude these otherwise you'll get:
    // Error:Gradle: Execution failed for task: ... com.android.builder.packaging.DuplicateFileException: ...
    packagingOptions {
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/DEPENDENCIES'
    }
}    

dependencies {

    ...

    compile 'com.android.volley:volley:1.0.0'
    compile('org.apache.httpcomponents:httpmime:4.3.6') {
        exclude module: 'httpclient'
    }
    compile 'org.apache.httpcomponents:httpclient-android:4.3.5.1'
}

NOTE: Don't use org.apache.httpcomponents:httpclient

You should avoid using the standard version of 'org.apache.httpcomponents:httpclient:4.5.2'

If you try:

android {

    ...

}

dependencies {

    ...

    compile 'com.android.volley:volley:1.0.0'
    compile 'org.apache.httpcomponents:httpcore:4.4.4'
    compile 'org.apache.httpcomponents:httpmime:4.5.2'
    compile('org.apache.httpcomponents:httpclient:4.5.2'
}

you will get:

java.lang.NoSuchFieldError: No static field INSTANCE of type Lorg/apache/http/message/BasicHeaderValueFormatter; in class Lorg/apache/http/message/BasicHeaderValueFormatter; or its superclasses (declaration of 'org.apache.http.message.BasicHeaderValueFormatter' appears in /system/framework/ext.jar)

or something similar to the existing comments [1] [2] [3].

You should rather use the Android port of httpclient, as per this SO answer

NOTE: Use org.apache.httpcomponents:httpmime:4.3.6

You have to use org.apache.httpcomponents:httpmime:4.3.6, you cannot go above version 4.3.x. For example, you may be tempted to use the latest version of httpmime, which at the time of writing is 4.5.2:

android {

    ...

}

dependencies {

    ...

    compile('org.apache.httpcomponents:httpmime:4.5.2') {
        exclude module: 'httpclient'
    }
    compile 'org.apache.httpcomponents:httpclient-android:4.3.5.1'

with this config, you will get the following when you invoke PhotoMultipartRequest:

java.lang.NoSuchMethodError: No static method create(Ljava/lang/String;[Lorg/apache/http/NameValuePair;)Lorg/apache/http/entity/ContentType; in class Lorg/apache/http/entity/ContentType; or its super classes (declaration of 'org.apache.http.entity.ContentType' appears in /xxx/base.apk)

Gerlachovka answered 29/3, 2016 at 3:28 Comment(0)

I copied this class from https://gist.github.com/ishitcno1/11394069 I will show you how you use it. It worked in my case. Copy this class. Make necessary changings.

package com.tagero.watchfriend;

import java.io.ByteArrayOutputStream;
import java.io.File;

import java.io.IOException;

import org.apache.http.HttpEntity;
import org.apache.http.entity.mime.MultipartEntityBuilder;
import org.apache.http.entity.mime.content.FileBody;

import android.util.Log;

import com.android.volley.AuthFailureError;
import com.android.volley.NetworkResponse;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyLog;

public class PhotoMultipartRequest extends Request<String> {
static final String TAG = "xxxxxx";

public static final String KEY_PICTURE = "kullanici_resmi";
public static final String KEY_PICTURE_NAME = "kullanici_resmi_dosya_adi";

private HttpEntity mHttpEntity;

@SuppressWarnings("rawtypes")
private Response.Listener mListener;

public PhotoMultipartRequest(String url, String filePath,
        Response.Listener<String> listener,
        Response.ErrorListener errorListener) {
    super(Method.POST, url, errorListener);

    mListener = listener;
    mHttpEntity = buildMultipartEntity(filePath);
}

public PhotoMultipartRequest(String url, File file,
        Response.Listener<String> listener,
        Response.ErrorListener errorListener) {
    super(Method.POST, url, errorListener);

    mListener = listener;
    mHttpEntity = buildMultipartEntity(file);
}

private HttpEntity buildMultipartEntity(String filePath) {
    File file = new File(filePath);
    return buildMultipartEntity(file);
}

private HttpEntity buildMultipartEntity(File file) {
    MultipartEntityBuilder builder = MultipartEntityBuilder.create();
    String fileName = file.getName();
    logYazdir("fileName : " + fileName);
    FileBody fileBody = new FileBody(file);
    builder.addPart(KEY_PICTURE, fileBody);
    builder.addTextBody(KEY_PICTURE_NAME, fileName);
    return builder.build();
}

@Override
public String getBodyContentType() {
    return mHttpEntity.getContentType().getValue();
}

@Override
public byte[] getBody() throws AuthFailureError {
    ByteArrayOutputStream bos = new ByteArrayOutputStream();
    try {
        mHttpEntity.writeTo(bos);
    } catch (IOException e) {
        VolleyLog.e("IOException writing to ByteArrayOutputStream");
    }
    return bos.toByteArray();
}

@Override
protected Response<String> parseNetworkResponse(NetworkResponse response) {
    return Response.success("Uploaded", getCacheEntry());
}

@SuppressWarnings("unchecked")
@Override
protected void deliverResponse(String response) {
    mListener.onResponse(response);
}

private void logYazdir(String str) {
    if (Sabitler.LOG_KONTROL) {
        Log.d(TAG, str);
    }
}
}

And here this is the method to upload image.

    public void resimYukle(final String filePath) {
    logYazdir("KaydolActivity-uploadImage çağırıldı!");
    logYazdir("\nfilePath : " + filePath);
    RequestQueue rq = Volley.newRequestQueue(this);
    PhotoMultipartRequest stringRequest = new PhotoMultipartRequest(
            Sabitler.URL_RESIM_YUKLE, filePath,
            new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    logYazdir("response : " + response);
                    JSONObject veri_json;
                    try {
                        veri_json = new JSONObject(response);

                        int success = 0;
                        String message = "";
                        try {
                            success = veri_json
                                    .getInt(Sabitler.SERVER_RESP_SUCCESS);
                            message = veri_json
                                    .getString(Sabitler.SERVER_RESP_MESSAGE);
                            Log.d(TAG, "success : " + success
                                    + "\nmessage : " + message);
                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }

            }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    logYazdir("Error [" + error + "]");
                    Toast.makeText(getBaseContext(),
                            "Sunucuya bağlanılamadı!", Toast.LENGTH_LONG)
                            .show();
                }
            }) {
        @Override
        protected Map<String, String> getParams() {
            Map<String, String> params = new HashMap<String, String>();

            params.put("kullanici_resmi_dosya_adi", "");

            return params;

        }

    };

    rq.add(stringRequest);
}

How are you gonna get filePath

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent      
                                        data) {
        logYazdir("KaydolActivity-onActivityResult çağırıldı!");
        if (requestCode == GALERIDEN_RESIM && resultCode == RESULT_OK
                && data != null) {
            logYazdir("KaydolActivity-GALERIDEN_RESIM çağırıldı!");
            Uri selectedImage = data.getData();
            String[] filePathColumn = { MediaStore.Images.Media.DATA };

            Cursor cursor = getContentResolver().query(selectedImage,
                    filePathColumn, null, null, null);
            cursor.moveToFirst();

            int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
            String picturePath = cursor.getString(columnIndex);
            cursor.close();

            Bitmap bmp = null;
            try {
                bmp = getBitmapFromUri(selectedImage);
            } catch (IOException e) {
                e.printStackTrace();
            }
            kullanici_resmi_iview.setImageBitmap(bmp);

            resimYukle(picturePath);

        }
        super.onActivityResult(requestCode, resultCode, data);

    }

Finally define this in your activity,

private int GALERIDEN_RESIM = 2;

Important part, this is PHP code for your server,

<?php
$target_dir = "resimler/";
$target_file = $target_dir . basename($_FILES["kullanici_resmi"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["kullanici_resmi_dosya_adi"])) {
    $check = getimagesize($_FILES["kullanici_resmi"]["tmp_name"]);
    if($check !== false) {

        $response["success"] = 1;
        $response["message"] = "File is an image - " . $check["mime"] . ".";
        echo json_encode($response);

        $uploadOk = 1;
    } else {
        $response["success"] = 0;
        $response["message"] = "File is not an image.";
        echo json_encode($response);

        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    $response["success"] = 0;
    $response["message"] = "Sorry, file already exists.";
    echo json_encode($response);

    $uploadOk = 0;
}
// Check file size
if ($_FILES["kullanici_resmi"]["size"] > 750000) {
    $response["success"] = 0;
    $response["message"] =  "Sorry, your file is too large.";
    echo json_encode($response);

    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    $response["success"] = 0;
    $response["message"] =  "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    echo json_encode($response);

    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    $response["success"] = 0;
    $response["message"] =  "Sorry, your file was not uploaded.";
    echo json_encode($response);
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["kullanici_resmi"]["tmp_name"], $target_file)) {
        $response["success"] = 0;
        $response["message"] =  "The file ". basename( $_FILES["kullanici_resmi"]["name"]). " has been uploaded.";
        echo json_encode($response);
    } else {
        $response["success"] = 0;
        $response["message"] =  "Sorry, there was an error uploading your file.";
        echo json_encode($response);
    }
}
?>

You should make sure to send your file in this method,

private HttpEntity buildMultipartEntity(File file) {
    MultipartEntityBuilder builder = MultipartEntityBuilder.create();
    String fileName = file.getName();
    logYazdir("fileName : " + fileName);
    FileBody fileBody = new FileBody(file);
    builder.addPart(KEY_PICTURE, fileBody);
    builder.addTextBody(KEY_PICTURE_NAME, fileName);
    return builder.build();
}

and pay attention this,

public static final String KEY_PICTURE = "kullanici_resmi";

kullanici_resmi

is used in PHP code to indicate image file. I guess this way, you can send any file. Sorry for my poor explanations, I tried to explain everything.

Deherrera answered 10/4, 2016 at 22:8 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags