I'm gonna go into our buildForm function here, and if you remember back from the portfolio-form, we can't simply append the image. We could, but we would be throwing an error on the API side, so we wanna be careful with this. We need to make sure and check to see if we have a featured image uploaded or not, so we're gonna add a check here.

And so, I'm gonna say, if this.state.featured_image. So, if it exists, then I want you to run the append method. And we can come up here and grab one of these as an example so then we don't have to type all of it out.

So, I'm gonna say formData.append, same portfolio_blog, that's something necessary for the API. It's gonna understand this and it's gonna know that we want to apply this to the portfolio_blog. And then from there, we're going to say this is for the featured_image, and then this is for this.state.featured_image, and that's all that we need to do.

blog-form.js

if (this.state.featured_image) {
  formData.append(
    "portfolio_blog[featured_image]", 
    this.state.featured_image
  );
}

return formData;

So, if you hit Save now, this should have everything working in the program. So, I'm gonna switch to Google Chrome here, make sure you hit Refresh, and now let's create a new blog. So, I'm just gonna say with image, blog status can be draft or published, add some content, and then let's drag a sample image here. So, I'm gonna drag that, and it looks like that worked properly, no errors.

And if I click Save, this all updated perfectly and it added the with image to our list. Now we can click on with image and you can see that that image was uploaded perfectly to the server. So, everything's working, great job. We only have a couple clean up items that I want to perform, and let's walk through what those are going to be.

So, the first thing is, we want to clear out the image itself. So, we've already performed this task with our portfolio-form, so I want to use that as a reference point. So, we can go back and forth with the portfolio-form so that we can kinda mimic the way I would build this in my own applications.

So, let's switch to portfolio-form, and let's see what we did, we first had to create a reference. If you go up to the constructor, you remember that when we create a reference, it gives us the ability to reach in and work with that component like it is our own, like it is a piece of HTML. Usually, we are hidden from being able to grab in and have a reference point to it, but if you read through the React documentation like we did earlier, it said that using refs, one of the main use cases, was to clear out form data, it's one of the recommended ways of doing it.

So, we can just copy this and bring back to the blog-form, inside of our constructor, come down here and just hit Paste. I'm not gonna call it thumbRef, I'm gonna call it featuredImageRef, and then, this is just taking in React and it's calling the createRef function. And then from here, we can call this from the component itself.

blog-form.js

this.componentConfig = this.componentConfig.bind(this);
this.djsConfig = this.djsConfig.bind(this);
this. handleFeaturedImageDrop = handleFeaturedImageDrop.bind(this);

this.featuredImageRef = React.createRef();

So, go to portfolio-form, and the next thing I would do, if I was building this myself, I'd say, okay, how did I call this from the DropzoneComponent? I can copy thumbRef and just search for it, and you can see that we first called this inside of the handleSubmit function and we saw where this gives us the ability to call removeAllFiles. Now, we only have one, so we don't have to use forEach in this case, but we are still gonna use this process, so that's cool, that's all we need on this site.

So, I'm gonna call ref.current.dropzone.removeAllFiles. And so, if you scroll down into your handleSubmit, you can see that we need to call this right here, so I'm gonna do it right below where we go back to the base state, but instead of ref, if you remember, we called this our featuredRef, or this.featuredRef, let's go, or featuredImageRef, I believe, there we go, and we want current.dropzone.removeAllFiles.

Now, we can also do a check here, just to make sure. So, I can say if this. and then state.featured_image, and then we want to clear this out. Now, this also is going to need to move, so we're gonna have to take this and move it above our set state because of what we're about to do, we're about to go back to the base state including our featured_image.

So, I'm gonna say featured_image and set that equal to an empty string. So, this is all that we need to do in that case, and the last thing that we do is we attach this to Dropzone. So, go into portfolio-form to see the syntax for that, and if you go down to Dropzone, you can see we have ref equals this.thumbRef so, we're simply gonna change up how we are calling it in our DropzoneComponent.

So, here, I'm going to say ref this and then say this featuredImageRef, and that should be all that we need to do. And now what's gonna happen is, if we do have an image, it is going to be cleared off the right way. This is gonna help us to make sure we don't have anything left over in state, we don't have anything left over in the Dropzone state, we've just cleared everything off properly.

So, if you come back to blog here, and let's add a new one. I'm gonna just say testing for modal, draft, any kind of content you want, and inside of the Finder, click and drag a sample image, click save, and everything is working perfectly, so great job, we have now completed the entire modal. We're done in regards to functionality.

In the next guide, I simply want to have a little set of style updates. So, I'd like to take this featured image box, I'd like to shrink it here so it's not taking up all of that room, and then I'd like to have our text box itself have a little bit more space and be clearly defined as a box.

Right now it's just this empty white space. We know it exists, but any other user wouldn't. So, we're gonna add some small style changes in that next guide, and this blog feature will be 100% done.

Resources

• Source code