Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server

Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server - Hello friends Android tutorial and tips trik, The article you are reading this time with the title Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server, we have prepared this article for you to read and download the information therein. hopefully fill posts article -, article (Part, article 4.2), article android, article How, article Images, article Multiple, article Server, article TO, article Tutorial, article Upload, article Volley, we can write this you understand. Well, happy reading.

Title : Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server
link : Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server

Baca juga


Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server

Hello everyone, my name is Oum Saokosal andthis is the part 4.

2 of how to connect android with PHP and MySQL using volley.

And this is how you can find me on YouTube,Facebook, Twitter and github.

In this part particularly, I talk about howto upload the image to server and the previous part 4.

1 is how to load the data from thegallery.

So we will talk about how to prepare the imagesand ready for uploading to the server and write some code in the PHP for the uploading.

If you are new to this video I’ll suggestyou go to my YouTube channel Oum Saokosal and watch the previous video before you cometo this video.

So this is what we have done, we could openthe picture from gallery and something like that and put it into image view in the scrollview and we will upload that picture into the server.

Okay! So what we have done here is get the imagefrom the gallery and then when we get the image, we add to the linear layout here andso now we want to add to arraylist, we use arraylist to upload that to the server.

So we should create an arraylist here, soarraylist is just a string and imageList and over here whenever you get the image by thephotoPath then you add that in the imageList, then if you don't have the source code, youcan go to my video over here and download the source code in the description, I putthe URL to the source code and then you can continue.

And you have the arraylist, anytime that youretrieve photoPath from the gallery, then we need to add an event to the upload here,so we don’t have it yet here and here is the ivUpload.

SetOnClickListener and new andhere it is the place that you will upload all the images to the server.

Then we need to run the for loop, okay, soString imagePath: imageList and actually it's just the path of any image and you have toremember that this library, the PhotoLoader can only load one time, you cannot reuse thebitmap, if you try to reuse the bitmap there's going to be an error so if you want to displayan image again you have to reload it, okay, for now we want convert the bitmap to theimage that is best suitable for string.

Like I told you in the previous video thatyou can only send the string into the server, so we have to encode the image to the bestsuitable for a string.

In order to encode it, we have to reload bitmapagain, Bitmap, actually it’s the same code here, so just copy it and maybe ImagePathhere and we need try and catch here because a file cannot be found sometimes.

Okay! So this is the bitmap and you want to encodethat bitmap, so you can use one of my library as well so you can go to my GitHub here, gitHubKosalGeek/PhotoUtil and you can see some documents, this is the image loader and I put the A-listto PhotoLoader and now you can use ImageBase64, and so this is the path of the library.

Okay so String and I call it encodedStringequal ImageBase64 and then you encode the bitmap.

Okay! Then this string is ready to put into theserver, Okay, now you want to send this to the server and remember it's not only onepicture, we have 2 or 3, so it is running in the for loop, so now we have to use volleyhere.

So it is just like an anonymous class insideanonymous class here.

It is gonna be light messy a little bit buthat’s ok and so you have a StringRequest right? Now I didn’t have include the volley yetso we have to include that.

So you go to android here and the build andthen you have to go to google and type like android volley library and here, the secondone.

Like I said in the previous video, this oneis duplicated we shouldn't use that, so we have to use the one from the android volleywhich is the official one.

Copy and paste it here and then you have tostring it.

Then we need MySingleton, so you have to goto first one here and we go to setting up a RequestQueue and if you don't understandwhy I'm doing this, I encourage you to go to the first video of the series then youknow how to do that and why I have to do that.

Okay! So I have to grab a code here MySingletonand let's create a class here, RightclickNew and then call it MySingleton here, just deleteit and don’t delete the package but just delete the code here and paste it and nowyou have one problem because of the Lrucache is nowhere in the library that belongs to2, so we have to include the one from version 4 here, okay, now you are good to go.

Now go back and now you can call the StringRequestand I just call the stringRequest=new StringRequest and the first one is a method.

Don’t forget! Now we want to POST the data, so now Request.

Method.

POST,okay and the second one is URL and we will create a URL for that but now just the blankone.

And then we need the data back, new Listener,so go here after the curly brace here, new again and add a listener then don't forgetto add that to (MySingleton.

GetInstance(getApplicationContext()).

AddToRequestQueue()); here and so StringRequest().

Okay! But for this one I encourage you not to dolike how because when you do like this it's like you add one thing in the loop.

In the first one you add, and the second oneyou add and the third one you add.

Remember the volley is not the first in firstout, it's the real multitasking thread, you know, so I encourage you not to do somethinglike this.

I want to call it after you run all the loophere.

So I want to call it outside but the problemnow is you have this but you want to put the parameter here and how can you get this outside? To do that you have to create a command andthe command is a design pattern, so you can go to Google and type design patterns commandand maybe tutorialpoint is about Java, so command is like, you can read from here, requestis wrapped under an object as command and passed to invoker object, invoker object looksfor the appropriate object which can handle its command and passes the command to thecorresponding object which executes the command.

So, it's like at first you put the requestinto a class array and then you call it, it's similar to a rocket.

Let me find a picture of that.

It is exactly to the volley request and alsoa command.

Like at first you ask all the vehicle to prepareit and so you add you know like the vehicle to be ready to fire.

Like okay, car 1 ready, car 2 ready and car3 ready to car N is ready.

And then you set that wakeup for my commandand if you said that fire, all the vehicle will fire the rocket at the same time.

So this is a kind of a command and the designpattern.

So to do that you have to have a class andthis is command class here and you have all the class request to the arraylist and thenwhenever you said to execute or fire then it will read from the array back again.

I suggest you read that for more informationbut right now I'll show you how to do that.

So here you have to create another class,I'll stick with just MyCommand.

So create a constructor MyCommand and nothinghere and let's see what is the data type of the request, okay, you remember when you callthe add to RequestQueue in here, so that one need a request, this is the request and soyou need to add an array, the type of request (T).

So here ArrayList<Request T>> requestList = new ArrayList<>(); create like this and so add,so you add a request and so whenever you want to add, just add to the arraylist and rememberarraylist now is not just a string, it's class and it’s a type of class basically any typethat comes with the request, you can add that.

Okay and then maybe you have remove and sometimesyou want to remove(Request) and the same thing here, so you remove from the arraylist and then you have a method and this is very important, this is called command, fire orexecute.

So whatever you want is like in the picturehere and you set fire all the rocket will be fired.

So maybe for execute it is now and for loopagain (Request<T> from the requestlist and then I will call MySingleton and then GEThere.

So for now we need a context, so it is a goodchance if you can put the context in the constructor here, context and so I have to create a propertyhere Context context and this one must be private as well, so here is context so addToRequestQueue(request)and so the avenger will be fired now and we have to add this one to arraylist, so we haveto create MyCommand outside here MyCommand mycommand = new MyCommand and you have tocreate a context here and so I use MyCommand here and so anytime you get the request, thenI will add that to MyCommand, I will add the StringRequest but StringRequest here is therequest as well, so you can add it because you want to use MyCommand inside anonymousclass like this.

So here is anonymous class.

Then we have to declare it as final and nowyou are good to go.

And then you can head up and in the end hereyou can call MyCommand and execute.

Here all the thing you have added into MyCommandwill be fired at the same time and in this way, you can make sure the request added firstand then you fire after the request added.

Okay! so we take care of the command and thenwe have to take care of data that we put to here and So in order to put here you can callthe overriding but in Java, there is a way, we call it anonymous overriding by here andafter the close brace here and you have to open the curly brace here and then you callgetParams.

Okay! And if you don’t have a suggestion likethis, you just put the cursor here and you go to code and override here then you canhave the getParams over here, make sure you put a A to Z here as it is easy to find.

Now you add the hashmap<string> and it isa string and for the getParams, getHeader, I made a video already in the second one soI encourage you to watch that in the second and third one.

It is more encourage able here.

Now just call Param and you call it Map andyou call it HashMap, so addParam may be with s and put the data here and so the data herewill be encoded string here and so we put here.

Again here must be final.

Anything that goes from user class to theanonymous class then have to be final, so I will call just image, okay and so this onewill be used in PHP, so make sure that the value, the key here has to be the same.

And here it is ok and this one I don’t needit.

Then just return and okay and so this datawill go to the URL and you will get the data back over here and if there is something error,put here toast, here getApplicationContext, and here set like “Error while uploadingimage”.

And if you get the data back you can now POSTit as well, so the data is response here and if you want to check the overall error youcan do that, but I made the video in the second one already, so just watch the second oneto know how to handle different errors.

So now we need the URL, that we can uploadthe image to the server.

So, I use XAMPP and my port is 80, okay, solike I said if you use the genymotion then you have to use the alias 10.

0.

3.

2 you cannotuse the localhost here, okay, because local host is different because in genymotion inthe emulator you have the local host also which will conflict with this one, so if youuse local host you will be called to the internal emulator so you have to call with the IP butyou cannot use like this as it is still a localhost So the number 10.

0.

2.

2 is for thebuilt-in emulator and the loosepack also 10.

0.

2.

2 and so if you use genymotion it is 3 and ifyou have the port then you have to provide the port like that and make sure that beforeyou run this you have to go to your emulator run from the browser here and then you needto run the WAMP server or XAMPP and whatever you want and test it in here.

And because you don’t have the URL, youjust test like this http://10.

0.

3.

2 and if you can get this page then you are good togo.

Sometimes you don't have the page becauseWAMP or XAMPP prevents you connecting from different device and then you have to go togoogle and check something like WAMP and check like permission denied and okay and then youcan fix that and if you are using XAMPP it's the same thing.

Okay! So now I can use that.

So this is my project here, I want to createa new one, I'll show you how to do that, so let's create a folder called Image, so youneed to provide a password maybe user and you need to maybe rename it to ImageUploadedTestand another password and also you need to give a permission and you go to the info hereand make sure that you have everyone Read Only, and if you don't then you have to openthe key, give the password here and then change to read only.

Okay and if you want to apply to the encloseitem then you can and okay here and read and close the key.

The most important folder is the file, theimage here and so here I will say upload and it is just the upload, so you have to givewrite permission and you have to make sure that this one is not read only but write aswell because you want to write from outside.

Okay! Write and also this one is write.

Now next time you want to change the realname maybe the file and then you have to enclose that as well, and then close.

So this folder is very crucial for your projectbecause anyone can write anything to this folder include virus, and hacker can loada code.

So you have to make sure that the folder isinvisible or maybe have to be absolutely secret.

No one can find that and so maybe you cancreate another folder folder folder like that.

And the folder here cannot be used outsidethe project so you have to make sure that you know its secret.

So for now, it is OK but if you are usingWindows, I suggest you to go to maybe Google and find WAMP file put contents permissiondenied Windows like that then you can see the permission because on Windows you stillhave to put the permission because you are using in the WAMP or XAMPP, so permissionusually read only not write.

For me I'm fine, so I need my file, actuallyI wrote a file of PHP code already, so I just use that.

I will explain it, here I have to check thePOST image is already set or not which is set if it's not set maybe I have some echothat notify that image is not in, maybe I put the image wrong and then it gonna be anerror.

And I need to assign it to an image, so Icreate a function upload, take the image here and so these two lines will create a uniquename for the image.

You have to remember when you add a picture,the name can be conflict because the name from the android can be the same anytime,so you don't want to have conflict name, so you have to make sure the name has to be unique.

So I create with the microtime.

So this gonna be not second but like a microsecondas well.

And the upload folder is very important, ithas to be inside.

This one you keep and put something like thisexample.

Come/upload and you have to remember that this function cannot upload any datato the http, so you cannot put the http here, that's why the folder has to be inside theproject, okay, you should not put any http in the folder and make sure if you are usingthe real hosting you make sure that your Hosting give a permission to upload that.

Okay and then the id and this is the id ofthe file and we put it over here and so then we get the full path and then remember whenwe put the image we don't put just the physical image, we encode it to the base64, so we encodeand here we decode, okay and the function is the PHP function base64_decode and youdo not need to write yourself and then you put that into path and then path here is thecontent with the hash here, okay and then if you uploaded successfully then you canget the echo back like uploaded_success and whatever you want to say.

But remember here you cannot say equals truebecause there is no true here because if you uploaded successfully then it’s gonna benumber 1, okay, so that’s why you cannot put a true here as there is no true here.

But then you can say if it is not false, rememberyou have to put like this.

If there is an error then you can echo back“uploaded_failed”.

Okay! This is the URL and I will use that.

First you need to test from your browser,localhostImageuploadedtestupload.

Php and now you get the URL right except you don'tput an image in and then you can use that.

So this is the POST to that and now you haveanything because you have the POST, because you use the POST here and then the URL becausesometimes you want to test this from your real device that is your real phone, thenthis one has to be replaced with your PC IP address , you can check it and in Mac youhave go to Open Network Preferences and it is the IP and make sure that your phone andyour PC are in the same network, so must be in the same network and so you will test fromyour phone then it has to be your PC IP.

But now you want to test from your emulator,so test it like this and this is the response.

So let’s see.

Usually the android 2.

0 has some cache, Ihave to clean it first to make sure it starts from the beginning, let’s see, we can uploadit or not.

One more time, I think there is an error becauseI forgot to put the permission to the Internet.

So go to android manifest and so only reading,so you have to put the permission here INTERNET so okay and upload and yes uploaded successand now you check the folder.

Boom.

Now you got the image, okay, maybe one moretime but we have to clear it, actually I do not have the code to create it, so maybe youcan do it by yourself.

So let’s try one more time and maybe uploadit and now you can upload it and as I said the imageloader may be loading one time andyou have to make a reason to refresh it or maybe you load an another image, so maybeyou have to clear an array and maybe to reload this one, okay but this is the basic idea,so I will not go further, this is the basic of using volley, so for the advanced partmaybe I will make some more videos in the future, so for now that’s it for the requestand uploading multiple images to the server.

I hope you enjoy it.

And please do not forget to subscribe my YouTubechannel and make sure you check this because I will make some more videos about androidvolley and so for now thank you and I will see you in the future!.



Thus Article Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server

That article Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server This time, hopefully we can give you all of the benefits. Well, I'll see you in another article post.

You now read the article Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server the link address http://svedda79.blogspot.com/2016/01/android-volley-tutorial-part-42-how.html

0 Response to "Android Volley Tutorial (Part 4.2) - How Upload Multiple Images to Server"

Post a Comment