Upload File or Image on Server using Volley Library

Question

I'm not able to upload file or multiple images on server using the Volley library.

Below is the response of the API:

{
  "id": 1,
  "data": {
    "no": "1019",
    "status": "publish",
    "condition": Default,
    "quantity": 2,
    "category": "default",
    "images": [
      "http://demo/test1/wp-content/uploads/12/hello.jpg",
      "http://demo/test1/wp-content/uploads/12/Penguins-1.jpg",   
    ]
  }
}

Does anyone have a solution for uploading multiple files or images using the Volley library?

Below Some images regarding response in postman using post

Answer 1

I have created a demo to upload more than two images using PHP. See code below.

Go step by step

---

Step 1

1) Main Activity with two ImageViews and set image from drawable folder

2) Change URL

3) getStringImage() is used to convert Bitmap to String (you can check in the log)

4) Upload using Volley library.

public class MainActivity extends AppCompatActivity {

    ImageView imageView1, imageView2;
    Button uploadImage;
    String URL = "http://192.168.1.85/DemoUploadTwoImage/post.php/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // XML Declaration
        imageView1 = (ImageView) findViewById(R.id.mimageView);
        imageView2 = (ImageView) findViewById(R.id.mimageView1);
        uploadImage = (Button) findViewById(R.id.mButton);

        // XML Set Images To ImageView

        imageView1.setImageResource(R.drawable.loading2);
        imageView2.setImageResource(R.drawable.loading1);


        uploadImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                UploadTwoImages();
            }
        });
    }

    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;
    }

    public void UploadTwoImages() {
        imageView1.buildDrawingCache();
        imageView2.buildDrawingCache();

        Bitmap bitmap1 = imageView1.getDrawingCache();
        Bitmap bitmap2 = imageView2.getDrawingCache();

        final String imageOne = getStringImage(bitmap1);
        final String imageTwo = getStringImage(bitmap2);

        Log.e("Image One", imageOne);
        Log.e("Image Twol", imageTwo);

        final ProgressDialog pDialog = new ProgressDialog(this);
        pDialog.setMessage("Registration is in Process Please wait...");
        pDialog.show();

        StringRequest stringRequest = new StringRequest(Request.Method.POST,
                URL,
                new Response.Listener<String>() {

                    @Override
                    public void onResponse(String response) {
                        pDialog.hide();
                        String result = response;
                        Log.e("Result", response);

                    }
                }, new Response.ErrorListener() {

            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e("Error", error.getMessage());
                pDialog.hide();

            }
        }) {

            @Override
            protected Map<String, String> getParams() {


                Map<String, String> params = new HashMap<String, String>();
                params.put("getdata", "UploadImage");


                params.put("insert_image_one", imageOne);
                params.put("insert_image_two", imageTwo);


                //Bank Information

                return params;
            }


        };

//Adding request to request queue
        VolleyAppController.getInstance().addToRequestQueue(stringRequest);

    }
}

---

Step 2

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/mimageView"
        android:layout_width="150dp"

        android:layout_height="150dp"
        android:layout_gravity="center" />

    <ImageView
        android:id="@+id/mimageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp" />

    <Button
        android:id="@+id/mButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="UploadImage"
        android:textSize="20dp" />
</LinearLayout>

---

Step 3 manifest File

1) Focus on this line: android:name=".VolleyAppController"

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jmtechnologies.uploadmultipleimagevolley">

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

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

    <application
        android:name=".VolleyAppController"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

---

Step 4

1) Add VolleyAppController. This is the class file for Volley.

public class VolleyAppController extends Application {

    // this methode is for multidex install For Map and google Api


    public static final String TAG = VolleyAppController.class
            .getSimpleName();

    private RequestQueue mRequestQueue;
    private ImageLoader mImageLoader;

    private static VolleyAppController mInstance;

    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
    }

    public static synchronized VolleyAppController getInstance() {
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
        }

        return mRequestQueue;
    }

    public ImageLoader getImageLoader() {
        getRequestQueue();
        if (mImageLoader == null) {
            mImageLoader = new ImageLoader(this.mRequestQueue,
                    new LruBitmapCache());
        }
        return this.mImageLoader;
    }

    public <T> void addToRequestQueue(Request<T> req, String tag) {
        // set the default tag if tag is empty
        req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
        getRequestQueue().add(req);
    }

    public <T> void addToRequestQueue(Request<T> req) {
        req.setTag(TAG);
        getRequestQueue().add(req);
    }

    public void cancelPendingRequests(Object tag) {
        if (mRequestQueue != null) {
            mRequestQueue.cancelAll(tag);
        }
    }
}

---

Step 5

1) Add LruBitmapCache class file. 2) Not mandatory.

public class LruBitmapCache extends LruCache<String, Bitmap> implements
                ImageLoader.ImageCache {
            public static int getDefaultLruCacheSize() {
                final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
                final int cacheSize = maxMemory / 8;

                return cacheSize;
            }

            public LruBitmapCache() {
                this(getDefaultLruCacheSize());
            }

            public LruBitmapCache(int sizeInKiloBytes) {
                super(sizeInKiloBytes);
            }

            @Override
            protected int sizeOf(String key, Bitmap value) {
                return value.getRowBytes() * value.getHeight() / 1024;
            }

            @Override
            public Bitmap getBitmap(String url) {
                return get(url);
            }

            @Override
            public void putBitmap(String url, Bitmap bitmap) {
                put(url, bitmap);
            }
        }

7) Server side files db_connect.php

<?php
 define('HOST','localhost');
 define('USER','root');
 define('PASS','Root@123');
 define('DB','uploadTwoImages');

 $con = mysqli_connect(HOST,USER,PASS,DB) or die('Unable to Connect');
 ?>

8) server side files post.php

<?php

include 'db_connect.php';
$datetime = date('d/m/Y');
$request=$_REQUEST['getdata'];

 // customer Registration form
if($request=="UploadImage")
        {
        //mysqli_set_charset( $con, 'utf8');

        $image1 =$_REQUEST['insert_image_one'];

        $image2 =$_REQUEST['insert_image_two'];
        $imageName1="image1.jpg";
        $imageName2="image2.jpg";



            $Image1_path = "Uploads/$imageName1";
            $Image2_path = "Uploads/$imageName2";

            $actualpath = "http://192.168.1.85/DemoUploadTwoImage/$Image1_path";
            $actualpath1 = "http://192.168.1.85/DemoUploadTwoImage/$Image2_path";


                $m=mysqli_query($con,"INSERT INTO `UserImage`(`imageOne`, `imageTwo`) VALUES ('$actualpath','$actualpath1')");   

                if($m)
                {
                    file_put_contents($Image1_path,base64_decode($image1));
                    file_put_contents($Image2_path,base64_decode($image2));
                  $flag['Code']='Data Inserted';
                }
        print(json_encode($flag));    
        }
else
{

    $flag['Error']='2';
    print(json_encode($flag));      

}       
?>

9)

10)

Answer 2

I suggest you add this code to resize pic before upload it. I wish it is useful for your code

protected void selectImage() {

            final CharSequence[] options = {"Choose from Gallery", "Cancel"};
            AlertDialog.Builder builder = new AlertDialog.Builder(YOUR_ACTIVITY.this);
            builder.setTitle("Add Photo!");

            builder.setItems(options, new DialogInterface.OnClickListener() {

                @Override
                public void onClick(DialogInterface dialog, int item) {
                    if (options[item].equals("Choose from Gallery"))
                    {
                        intent = new   Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

                        intent.putExtra("crop", "true");
                        intent.putExtra("aspectX", 0);
                        intent.putExtra("aspectY", 0);
                        intent.putExtra("outputX", 200);
                        intent.putExtra("outputY", 200);

                      startActivityForResult(intent, 1);

                    }
                    else if (options[item].equals("Cancel")) {
                        dialog.dismiss();
                    }
                }
            });
            builder.show();
            }

Answer 3

Take a look at here: Online chat Application in Android using GCM,PHP,Volley... the example of chat application it contain module of image upload using Volley i hope it helps :)

Answer 4

Try this:

private void UploadImage(String url) {
    VolleyMultipartRequest multipartRequest = new VolleyMultipartRequest(Request.Method.POST, url, new Response.Listener<NetworkResponse>() {
        @Override
        public void onResponse(NetworkResponse response) {

            String sStatus = "";
            Log.e("registr", resultResponse);
            try {
                   String Sstatus = "", Smessage = "";
                try {

                    JSONObject object = new JSONObject(resultResponse);
                    Smessage = object.getString("message");

                    if (Sstatus.equalsIgnoreCase("1")) {

                    }
                } catch (JSONException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }

                if (Sstatus.equalsIgnoreCase("1")) {

                    } else {

                    }

            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            dialog.dismiss();
            NetworkResponse networkResponse = error.networkResponse;
            String errorMessage = "Unknown error";
            if (networkResponse == null) {
                if (error.getClass().equals(TimeoutError.class)) {
                    errorMessage = "Request timeout";
                } else if (error.getClass().equals(NoConnectionError.class)) {
                    errorMessage = "Failed to connect server";
                }
            } else {
                String result = new String(networkResponse.data);
                try {
                    JSONObject response = new JSONObject(result);
                    String status = response.getString("status");
                    String message = response.getString("message");
                    Log.e("Error Status", status);
                    Log.e("Error Message", message);
                    if (networkResponse.statusCode == 404) {
                        errorMessage = "Resource not found";
                    } else if (networkResponse.statusCode == 401) {
                        errorMessage = message + " Please login again";
                    } else if (networkResponse.statusCode == 400) {
                        errorMessage = message + " Check your inputs";
                    } else if (networkResponse.statusCode == 500) {
                        errorMessage = message + " Something is getting wrong";
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
            Log.i("Error", errorMessage);
            error.printStackTrace();
        }
    }) {
        @Override
        public Map<String, String> getHeaders() throws AuthFailureError {

            Map<String, String> headers = new HashMap<String, String>();

            return headers;
        }

        @Override
        protected Map<String, String> getParams() {
            Map<String, String> jsonParams = new HashMap<>();
                jsonParams.put("key", "value");
                 return jsonParams;
        }

        @Override
        protected Map<String, DataPart> getByteData() {
            Map<String, DataPart> params = new HashMap<>();


            if (byteArray != null) {
                if (extension.equalsIgnoreCase("jpg")) {
                //Important convert your image into byte Array
                    params.put("image", new DataPart("image.jpg", byteArray));
                }
            }

            return params;
        }
    };

}