[MUSIC]

Probably the most important feature for

us to incorporate into Giflib is the ability to upload, well, GIFs.

And we haven't even touched it yet.

It's time to change that.

In order to incorporate a file upload feature, we'll need to make a new addition

to a standard HTML form, include a parameter in the GIF controller method to

accept file data, and of course update our service and DAO layer to save it all.

First, in order to give our users an opportunity to upload a file they've

saved on their device, we'll need to alter the HTML form element.

We will need a new attribute called enctype which stands for encryption type.

Let's open the .gifs form and do that now.

So that template is located in the templates/gif directory, and

there is the form template.

And that attribute that I was just referring to goes inside this form tag,

ENC type.

And we will use this multi part/form data value.

This allows the form submission to include not only simple parameter value pairs but

also file data.

And while we're in here let's use object binding on the form just like we did on

the category form.

So in this form element, I will bind the gif object.

Remember that's the dollar sign curly brace notation to

reference some model attribute named gif.

And then I'll bind both the description and the category IDs.

So I'll scroll down here to the description.

And I will bind the description field.

Remember when you're binding a field,

you use the asterisk instead of the dollar sign.

Description, and down here, we'll use TH field.

And that will be a category.id.

Now, notice I use a dot notation here.

But that's simply because the category property

is one that is a part of our bound object which is GIF.

So essentially, it's gif.category.id.

And this whole select element represents the ID

of the category that we want to be associated with the GIF that's uploaded.

Now you'll also notice that I'm not binding this file field here.

This is because the file property isn't a property of the GIF entity at all.

And we can certainly make this change and there might be good reason to do so

to add a file field to the GIF entity.

Check the teachers notes for more info on this, for now though,

I'll leave it as is so that the file data is submitted as a parameter named file.

And so that is indeed passed along with the post request.

I won't forget the name attribute.

And let's take care of a couple more items while we're here.

First let's add those necessary form element attributes the action and

method attributes.

So up in the form element I'll say th action equals and

all have thymeleaf process this URL we will post to the /gifs URI.

Speaking of post we want to set the method of this form submission as post.

Next, we should iterate over the actual categories in our app

instead of displaying a single static category.

So I will add a th:each attribute here, th:each.

And here I'll say for every category that all named Cat in this

model attribute categories, we'll be generating an option for

each one of the elements that's in the categories model attribute.

Now for this we'll want to add a value to be sent along with the select element,

whose name will be the category ID, to the value here will be

whatever ID this particular category on this iteration of the loop happens to be.

And the text that will display in this option will be cat.name again.

That comes from the category entity, there is a name field there.

And finally let's take care of this static style attribute.

Let's make Tymelive processes.

And instead of making it a single static color, let's use time leave concatenation.

And let's replace this with the value from the cat object, cat.colorcode..

Whatever category that we're on during this iteration,

let's use that Color code as the color value for

the style attribute and that should do it for now.

One thing you wanna always take note of while coding your templates.

If you ever reference an object with this

dollar sign curly brace notation like this dollar sign GIF.

Or down here this $ categories then you will need to have

added those attributes to the model from your controller.

Either directly or via redirect attributes.

I see here that those two objects on need to address.

Again that's the GIF object up here that we'll need to add

as well as this collection of categories down here.

Let's switch to the GIF controller now and add those so

that we don't forget them later.

So we'll open the GIF controller to do that.

Let's scroll down to the method that renders a form for adding a new GIF and.

It is called form new GIF right here.

Let's start by adding that GIF attribute.

So we'll do model dot addAttribute we called it GIF the template so

we'll call it GIF here.

And we'll create a GIF object using its default contractor.

Next, we'll add the current list of categories.

But for this, we need to auto-wire the category service.

And I'll do that up top.

So I'll scroll up top.

And I will auto wire the category service.

I'll call it category service.

So now I can scroll back down to where it says.

Form new gift and I can add that list of categories.

So we'll say model.addAttribute, we called it categories in the template, so

let's call it categories here.

categoryService.findAll.

At this point our form should render nicely in the browser so

let's pause to test it all save all my changes here and

let me stop what I have going here as far as my application instance.

I all ready had a database server running but

if you didn't you could certainly execute this command once again.

So let me rerun that bootRun task, and make sure everything

compiles correctly and that the application starts successfully as well.

Cool, started the application.

Let's switch to Chrome, and

let's make sure everything comes up nicely in the browser.

I will click the.

Upload link to check it out.

Let's check out this categories dropdown to see if we got all of our

categories in there.

And there they are.

Looks like we're rocking and rolling.

Hey, one quick note.

If your Browse button right here isn't working such that when you click it file

explorer or a file chooser doesn't come up then here's what you want to do.

It could be because the label on the form can't find an input element whose id

is file.

In browsers the four attribute connects labels to input elements using the input

elements id attribute let me show you what I mean if you go to the form.

You'll see that the input element has an ID attribute named file and

I added a name attribute with the value file as well.

This label element is what renders the button there.

But when you use this for attribute in a label, whatever value you place here,

the browser will connect that with its associated input element.

Using that input elements id attribute not name attribute so

this is for a file that means this label will be associated with

this input since this input has an id of file.

So be sure to check that out if by chance you come up with a browse button

that doesn't work.

And next we'll tackle the service for gifs.