Making a POST Request8:56 with Jamie Huson
Upload your own photos, or allow others to upload theirs using POST request.
Now that we can see the user's uploaded images, 0:00 let's allow them to upload their own. 0:03 To simplify this, I'm going to use an image I packaged in my assets folder. 0:05 Let's go ahead and take a look at that here. 0:09 You see under assets, I included this sample 0:13 image of some flowers, wild flower field. 0:18 And you can get an image however you want I'll leave that up to you. 0:23 So you can implement something for getting an image from the camera or 0:28 from any document provider or anywhere else you want to get an image, for now. 0:32 I'm gonna test this using the sample image I provided here. 0:36 Once you have an image, you'll be able to use the same mechanism to upload images, 0:39 using any image you get from any source. 0:45 So to add an end point, let's go ahead and go back to our image or API and 0:51 point class. 0:55 So again this is going to be under the Auth because 0:57 we're going to add this to the user's account. 1:00 Upload to the user's account so, it needs to be off. 1:02 So this call to upload an image is going to be of type post. 1:07 And that's found by looking at the documentation online. 1:13 So I'm gonna use a post type annotation, 1:16 and it's to the end point upload. 1:20 Let's go ahead and make sure we import this. 1:28 And there aren't any path parameters like we had in the images call where we 1:33 inserted the user name and page, at the time we were calling this. 1:37 Instead, one thing we do need to do is we're going to say that this is a type 1:40 Multipart, so that means that this is going to post data like a form would. 1:44 It's a Multipart, 1:51 it has different parts to it so we're gonna include different parts. 1:52 And in this call, specifically, we really have one part we need to include. 1:55 So first, I’m just gonna call this upload images. 2:00 That's gonna be the name that we use of our method. 2:03 And then we're going to include, the part. 2:06 So the part in this case. 2:09 Is going to be our image And 2:11 parts are typed to something called request body, and 2:16 we'll go through how to create a request body object. 2:22 But it basically represents binary data. 2:28 And when we upload this image, what we're going to get back is an image. 2:31 So, we're going to use that basic class that's typed with the image. 2:38 And that image that comes back is going to have the URL where this was uploaded to. 2:44 Okay, now that we've added a method to the end point to upload an image, 2:51 let's go ahead and use it in our activity. 2:55 So, here in our main activity, let's go ahead and 2:58 go down to the button that we already have in our layout. 3:00 Btn_upload and 3:03 when we click that button what we want to do is we want to upload an image. 3:06 Let's go ahead and add a method called upload. 3:09 And we haven't created this yet, so let's go ahead and create it down here. 3:12 Private void upload. 3:17 And here, what we want to do is we can go ahead and 3:21 make an indicator for us using a snack bar that we are going to upload. 3:25 So we'll say Uploading Image and make it short just like our other one. 3:30 Make sure we call show. 3:38 And then the next thing we need to do is get our API. 3:40 Service.getAuthedAPI, and we'll call upload images. 3:45 Now we're only uploading one image, so 3:50 we might want to refactor this name here, which we can do pretty easily. 3:52 Just call it upload image instead. 3:58 And remember that this takes in a request body. 4:05 So what does that request body how do we make one? 4:12 Well the first thing we need to do is use the requestbody.create method. 4:15 So this is gonna help us creating a request body. 4:22 The first thing it wants to know is the type of 4:26 data that we're going to be creating in this request body. 4:30 And there's a helper for this, media type, and we can just parse the type. 4:33 we know this is an image so we're going to see image/jpeg, 4:39 and then the second thing it needs is the image itself. 4:43 So we're going to pass in the image, but we haven't created that yet 4:49 we'll get to it in a minute. 4:52 So we need to create this actual image in and 4:55 what will notice if we hover over are here is that the create 4:58 implementation takes in a few different forms.It could be a string a file or 5:02 a byte array what we want is we're going to use a byte array for this. 5:07 So to create a byte array from our image 5:10 I'm gonna use the OK IO library that square provides. 5:14 It's a part of their open source projects. 5:17 And you can find it just by Googling okio square. 5:20 It's included in the dependencies for this project, and 5:25 it makes it really easy to handle data, and specifically byte data. 5:28 So here's what I'm going to do. 5:33 First I'm gonna say Okio and then I'm going to say buffer. 5:36 So what I want to do is start to create a buffer for 5:40 the bytes that I'm gonna read out from this file. 5:43 And now I need to give it the source that I'm gonna read from. 5:45 And so I'm gonna say Okio.source, and 5:48 then it takes a few different options for the parameter, but 5:51 we're going to use an input stream, cuz that's what our asset manager gives us. 5:54 And the asset manager is where this file's located. 6:00 Remember I put a sample image in the Assets folder. 6:03 So here all I need to say is open and give it the name sample_image.jpg. 6:06 And what I'm going to do with this is I'm going to store it in a BufferedSource. 6:15 And this may cause an exception, if for instance the file wasn't there. 6:25 So we do need to wrap all this in a try catch block. 6:29 We'll just catch that (IOException e). 6:37 And now, once we have our buffer and source available to us, 6:42 we can just read it into an image. 6:45 And there's a handy method called readByteArray, 6:52 just reads this into a byte array for the image. 6:54 Okay, so this upload image, 6:58 it's going to give us back our call, and we need to handle that call here. 7:05 So let's go ahead and queue it. 7:09 You want to execute this asynchronously and provide a callback when it completes. 7:11 And when it completes, it's going to have the image that was just uploaded. 7:20 And what we want to do is we wanna make sure that everything was all right. 7:25 So again, we're just gonna say response.code, 7:29 and we're gonna make sure that, that is the OK response. 7:32 And if so, let's just go ahead and fetch the account images again. 7:37 There should be an additional account image there. 7:39 If there isn't, we can go ahead and show a snack bar again. 7:43 I'm just going to put that in here. 7:47 Just to give us an indicator here in our 7:53 app we're building that something did happen that wasn't quite right. 7:56 So if we go ahead and run this and test it, what we should see is, 8:01 when we upload the image, it'll upload. 8:04 When it comes back, it's going to fetch the account images again and 8:07 display one more image in the list. 8:12 So let's go ahead and run it. 8:15 So we're first getting the account images. 8:38 And now I am gonna click to upload an image. 8:41 The image is uploaded and we can see here that 8:43 the list was also refreshed when the image was uploaded, and a new image was added. 8:48
You need to sign up for Treehouse in order to download course files.Sign up