Preview
Video Player
00:00
00:00
Making a POST Request
8:56Upload 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