Remember that we have our thumb image working and now we need to implement the banner and then also the logo, so let's start going and doing that and this is mainly going to be a review, we're pretty much going to be following the identical process that we've been following for building the thumb image uploader, so, this will be good practice.

If you come into your portfolio-form component, we are going to create a few more handlers, so right now we have this handleThumbDrop, we need to create two more of these and one is going to handle the BannerDrop and so, make sure we're populating that in the constructor, so handleBannerDrop and then the last one's gonna be the LogoDrop and populate that, so now we will be able to have each one of those drop actions have its own dedicated event handler.

portfolio-form.js

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.componentConfig = this.componentConfig.bind(this);
this.componentConfig = this.componentConfig.bind(this);
this.djsConfig = this.djsConfig.bind(this);
this.handleThumbDrop = this.handleThumbDrop.bind(this);
this.handleBannerDrop = this.handleBannerDrop.bind(this);
this.handleLogoDrop = this.handleLogoDrop.bind(this);

Now, you may be curious on why we wouldn't just create an event handler that would handle all three, and it has to do with some issues with the Dropzone library and when the items fire, so I can actually show you that right here. If I go to, not handleChange, buildForm, okay, here we go, handleThumbDrop.

If we were to say create a handler that tries to handle all three and then pass in an argument, then what's going to be returned is actually going to alter the behavior, it's going to return something that is not actually going to set state properly, it's going to be called at the wrong time, so in this case, this is a rare, rare exception where it really is the best approach to just create a dedicated handler for each one of those image types, so that's what we're going to do.

We're gonna have handleThumbDrop and then we're just going to go and really triplicate this, we're gonna have three of them and so, we have handleImageDrop, should now be handleBannerDrop and then we're going to have this setState but instead of updating the thumb_image, we're going to have it update the banner_image and then we're going to follow the same process, so instead of handleThumbDrop, it'll be handleLogoDrop and then it's going to setState and update the logo and remember, we can get access to know the names of these files in the documentation.

portfolio-form.js

handleThumbDrop() {
  return {
    addedfile: file => this.setState({ thumb_image: file })
  };
}

handleBannerDrop() {
  return {
    addedfile: file => this.setState({ banner_image: file })
  };
}

handleLogoDrop() {
  return {
    addedfile: file => this.setState({ logo: file })
  };
}

What we get back has that _url value and when we're passing it up, we just need to use the name itself and if that seems a little confusing, don't worry, it is confusing and that should be confusing. Whenever you're working with an API, you're gonna have certain rules and certain conventions and it's the job of that API's documentation to tell you exactly what the names of the attribute should be.

So do not worry or feel like you're not gonna know what to type in. The documentation you'll have is going to provide you with that full list of attributes, so that's all we're doing right here is we're updating that.

So, now that we have that, now we can come down into our JSX code, so come all the way down to our image-uploader, so we have this DropzoneComponent inside of image-uploaders and now what we can do is we can add two more of these, so we can call the same component two more times and then the only difference is we're going to add in the different event handler.

So for the very first one, we're going to say this one's gonna be the handleBannerDrop, and then we're gonna say instead of handleThumbDrop, as you may have guessed, it'll be handleLogoDrop and that is all that we need to do in that case.

portfolio-form.js

<DropzoneComponent
  config={this.componentConfig()}
  djsConfig={this.djsConfig()}
  eventHandlers={this.handleLogoDrop()}
/>

So let's go and let's just verify that what we see is there and it's working, okay, so we have these three items and we don't have a name for 'em yet but don't worry, we're gonna learn how we can actually customize some of these text items in here in a later guide. So, we have each one of these and if I open up the React dev tools, let's see if the handlers are working.

So, I'm gonna first open up React dev tools here and it looks like we have a few errors in the console. Let's first take a look at those and make sure we don't have an issue. So, it says uncaught in promise, DOMException, failed to execute postMessage on Window.

Okay, this could just be because the server was shut down, let me hit refresh one time just to make sure and it is not coming back, so yes, we're all good. You get sometimes some weird errors whenever you have the server turned off, so I'm gonna go back to the React dev tools, use the React Inspector, not the Browser Inspector, and let's go and look at the PortfolioForm component.

So we have PortfolioForm and now we can take a look at state. So, you can see here we have logo is empty, we have thumb_image that's empty, all of those and that's perfectly fine, so if I pick out an image here, I'll go to my Sample Images, so I'm gonna pick out Dining and then let's go here and let's say, let's go dining 3.

Okay, here we go, yes, okay, so we have thumb_image, this one has been updated, and then let's see and banner_image has as well, so that's perfect and let's do one more, just for the logo, just to make sure it's working. So dining 1 and there we have logo and we have access to the file.

Now, we have a few errors in here. Illegal invocation, that's perfectly fine, we're gonna take care of those here shortly. But for right now, just know that we have our image uploaders when we upload the image, they're uploading state.

Now there's only one other item I would like to add in this guide and then we'll take a break. And that is to populate our buildForm method, so you can see that we have a check to see if state has a thumb_image, then we want to append the new value and so, we just need to replicate that for the different, for the logo and also for the banner.

So I'm gonna say this.state.banner_image and we want to update that in each spot and then after that, we're gonna do the same thing for the logo. So, let's take this, copy it and then let's say if there is a logo, so if this.state.logo, then I want to update the way that the form is set up, so I want to append logo on and then do the same thing with banner_image.

So, that's saved everything and let's test this out and see if it works, I'm gonna open up DevCamp Space as well. Let me zoom out so we can see it at this resolution. And hit refresh just to make sure I have the right records in place. Okay, down at the very bottom.

Okay, we have one with three images. Let's call this one Testing all three, it doesn't really matter what we put in those other categories but let's just go and upload a few sample images, and once we have this last one, we can test it out.

Okay, so those are all done, if I hit save now, nothing happens 'cause remember, we haven't added in the clearing of the form. But now you can see, testing all three, added the thumb image.

Let's come back, hit Refresh, see if it added the other images, and this is one of the nice things about having a tool like DevCamp Space and look at that, we have all three images.

So that's all we needed to do and like I told you, this is gonna be mainly review. We really were just replicating what we were doing with this thumb image DropzoneComponent. We now have this populating state and also going into the buildForm method and so, all of that gets wrapped up and passed into the API.

So, now that we have all of this, we can start performing a few of the cleanup items and start making this form look good.

Resources

• Source Code