In this video, we'll be integrating our frontend
application with the backend endpoint
that we just created.
In order to proceed with that, we need to
first see what we are working with in our
seed project.
If we scroll down, we can see our form for
the image search.
Here's the image search panel.
And if we scroll down, you can see the input
type file, which represents the form widget
for users to upload images with features of
the type of destinations they would like to
We scroll down a little bit, we also have
a preview section for the image that was selected
and we have our travel preferences checkboxes.
These have all been given IDs in order to
target them in our JavaScript code.
So now let us head over to app.js
where we'll be doing our integration.
Let's pull that up and scroll to the very
top.
Now here in the Tag Selection section, that
is the DOM element section, we have ImageForm
and ImageInput that help us select our form
and input fields respectively.
Then we have ImagePreview and PreviewIMG.
These help us select the preview container
and the image tag for the preview to be loaded
respectively.
All other utility functions like GetSelectedPreferences
and LimitPreferences perform the same functions
we described in the previous section.
A change event, let us search for that, not
this, the next one, has been added to our
image input such that when a user selects
an image, it is then loaded into our preview
section.
To implement our integration for this image
feature, let's add a submit button handler
to the image form selector.
Just as with the first integration, I have
also set apart a section for that.
So let us scroll down.
This is our first integration.
And just under that, we have our second integration
task, which is to undo the image form submission.
To begin, let us add our submitEventHandler
to our image form selector.
We add an async function to that because we
are going to be running asynchronous operations.
Inside the handler, let us first prevent the
default form submission behavior and then
handle our inputs.
So first we say, e.preventDefault.
Then let us get our data.
Say const file equals imageInput.files.
Then we also get our preferences, and that
can be handled using GetSelectedPreferences.
And we can simply pass it the image preference
checkboxes because we are selecting a different
set of preferences for that.
Scroll down.
Yeah, here.
Scroll back down and now we can check the
file if the user submitted any file and if
they didn't, show a message and say please
select an image and this will be of type warning.
we can return from this.
With our data collection and checks in place,
we can now kickstart the API request by showing
our progress indicator and opening a try catch
block.
Here we can just come down and say show loading
and say try catch our error and be all set
to write our request.
To begin our request, inside the try block,
let us package the form data for our request.
Do that by saying const, and create a new
form data.
And here we can simply append our file to
this form data.
Let me scroll this into view.
Not too much.
Okay.
Let's say append and we set the value to file
because that is what our endpoint expects
and we pass it our file.
Next we check if we have preferences and if
we do we want to append those also.
So just quickly say if preferences.length
is greater than zero then we want to append
that to our form data also.
The backend expects it as a preferences key.
And here we can just simply send a string
that is comma-separated.
Now that we have our data all sorted out,
let us send our request to the endpoint that
we just developed in the previous video.
So here, we'll say response const response
equals await fetch.
Then we're going to send this to our API base
URL.
And we're going to target the forward slash
API forward slash
suggest by image endpoint.
With the URL in place, we can then start setting
our request
configuration.
For the method, we want it to be post.
And for the body, we want to use form data.
Next, let us check our response to see if
there are any errors.
And if there are no errors, let us display
our results.
If no errors then let us just get our data
and hide our progress bar and finally display
our destinations, which we can get from data.destinations.
Good.
We're almost done.
Let us quickly wrap this up by making sure
that we take care of error cases that can
be captured by our cat block.
First we hide our loading indicator.
Then we print out the useful error to our
console using the error object that was returned.
And finally, for the user to be aware of what
just happened, we're going to show an error
message that says, error processing image.
Please try again.
I'm gonna simply make it an important looking
message by setting the type to danger.
Awesome.
We're done integrating and in the next video,
we'll be testing this out to make sure that
there are no errors and everything works as
expected.