We've now got the ability to render out an image on the screen or in theory, all the images we fetch
from the imgur API that belong to our account, but we still don't have the ability to actually upload
images directly through our application.
So in this section we're going to start working on this upload form over here.
We'll first start off by getting a quick reminder of what this page is supposed to look like, and then
we'll take a look at the imgur API documentation to get a better idea of how we upload images at all.
So first, a quick review of the mock up.
And as you might recall, yeah, the mock up is pretty straightforward.
So essentially we want to just have a big section in the middle of the screen that says, Hey, just
drop an image here to upload it.
So a user should be able to either drag and drop an image onto the screen to upload it or specifically
onto this little section right here to upload it.
Or they should be able to click this element to get a little file select screen to pop up as well.
So even though the text here says drop image here to upload it, there's really two ways of specifying
the file to upload, drag and drop or click on this thing right here.
Okay, so now that we remember, we remember what we're trying to build.
Let's go take a look at the API and get a better sense of how we do file upload at all.
All right.
So I'll go back over to the documentation.
Remember, this is at API docs dot imgur.com.
Then on the left hand side, that pops up.
I'm going to find the image section.
So again, inside of here, we see a list of all the different API endpoints that are related to working
with individual images.
So you and I want to upload an image.
So as you might guess, we're looking for image upload right here.
So to upload an image, we're going to make a post request to this URL and that post request is going
to contain one property or at least one required property, which is image.
So this is going to be a key in the body of the post request that we make.
And then this The value for that property is going to be an actual image file.
So we'll get a better idea of how we handle a drag and drop file upload in the browser in just a little
bit.
But for right now, I think you can agree that at the end of the day we probably just need to make a
post request to this endpoint, attach some property called image and that should have the actual image
file that we're trying to upload.
So that's pretty much it.
Now one thing I want to point out here that's very important to note.
Take a look at the documentation right here.
It's very deliberately saying we are uploading a new image.
So with this we are uploading a singular image like one at a time.
So we're going to set up our upload form to upload multiple images.
But when we do so, we're going to be making multiple simultaneous requests.
So one request per image.
And if we want to upload five images at a time, that means we have to make five separate requests.
So let's just keep that in mind as we start putting together our upload code.
Okay, so now we've got a better idea of what we're trying to build and the API we're going to use to
build it.
Let's get started in the next section.