This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Upload your own photos, or allow others to upload theirs using POST request.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up