Now the goal of this guide is going to be to add the base configuration, and also to be able to get one of our uploaders at least to a point where we can see it, where we can add a file and see that it renders the preview. Now we still will have to connect it to the API and to that build form component, so we have a number of steps, and we'll break those into multiple guides so that they're easier to follow.

So for this guide, let's simply install it and configure it in our portfolio form component. The first step is to import it, so I'm gonna say import, and it is called DropzoneComponent from react-dropzone-component.

portfolio-form.js

import DropzoneComponent from "react-dropzone-component";

And then after that, we also need to manually import some stylesheets. Now, this is something we have not had to do so far in this course, but because Dropzone has a number of specific types of styles, so if you come over and you look at what we're going to generate, you can see we have these icons, we have the ability to render a preview just like this.

Those don't come out of nowhere, those are just stored in a stylesheet somewhere. So we need to import those, and I will show you how you can do that. So you can manually import stylesheets in React by doing this, and I'm gonna show you visually, and I'm also going to type it in.

So if you go to your node modules directory and open it up and then scroll all the way down to where we go to Dropzone, so we're gonna be pulling in two files. And you don't have to perform this first step, I'm simply showing you where we're performing the import so that it doesn't feel just like magic, like we're pulling these stylesheets out of thin air, so we are pulling them directly from the node modules.

So keep on going down, thankfully they are in alphabetical order. And once we get down to where it gives us our one for Dropzone, as you can see right here, then you're gonna wanna go to the dist directory. And then inside of dist, you're gonna want to go to min, and then once in min, dropzone.min.css.

So this is gonna be the file that we're gonna be importing, and you may say that's just one line, it's because it's been minified. If you scroll all the way to the right, you'll see that this contains literally hundreds if not thousands of specific CSS rules, so that's why we're importing it instead of having to write all of those ourselves.

So you can import these manually by providing a path to it. So I can say import, and then inside of a string, ../../../. And the reason for that is because we're in this portfolio form, we need to jump back three directories to get to the node_modules directory, and then to get Dropzone, then the same path that we followed /dist which is short for distribution, /min/dropzone.min.css.

import "../../../node_modules/dropzone/dist/min/dropzone.min.css";

Now if you're curious about how I knew to do this, this took a little bit of trial and error the very first time I integrated an application with Dropzone. I kept on getting errors, and so I had to figure out exactly where they were storing the stylesheets and then I was able to import it manually by simply going through the node modules directory.

So that is the reason, that's part of the reason why we spent so much time in the very beginning of the course going through the file system and the structure so that you'd be comfortable doing that exact same thing at some point when you have to do that with a different library.

So now that we have that, now we need another library. We're not gonna go through the node modules directory, just trust me and know that it's here. We need to go all the way to node modules, and this time though, we wanna go into a different library. It's actually going to be the React Dropzone component library, so I'm gonna get rid of everything from node modules on.

So I'll say react-dropzone-component/styles/filepicker.css, and we can save it.

import "../../../node_modules/react-dropzone-component/styles/filepicker.css";

And I'm actually gonna move it so it's right above here because I believe this has a few core styles that the Dropzone min may need to import. So I'm gonna import this one first, and that's what we need to do for the styles.

portfolio-form.js

import React, { Component } from "react";
import axios from "axios";
import DropzoneComponent from "react-dropzone-component";

import "../../../node_modules/react-dropzone-component/styles/filepicker.css";
import "../../../node_modules/dropzone/dist/min/dropzone.min.css";

So now that we have that, we can add a couple of configuration methods, so we're gonna have two configuration methods. We're eventually gonna have more, but for right now this is what we're gonna have.

We're gonna have one called componentConfig, it's not gonna take in any arguments, and then inside of it, we're gonna return an object. And this is all inside of the React Dropzone component documentation. I recommend you to go through it in your spare time so you can see that I'm not making this up.

All I am doing is literally reading the documentation and then from there, picking and choosing the different elements of the component that I wanna work with, that is all it is. So here we're returning an object and inside of here, there are a couple of things that I wanna do.

First I want to limit the number of file types that will be accepted. So I'm gonna say iconFiletypes, and it's spelled exactly like this. And this is an array, and it's an array of strings, and the first one is going to be .jpg, and the second one is gonna be .png, so that is the first argument.

And these are not things that you can make up. What we're doing here is we are speaking directly to the React DropzoneComponent. It has a number of rules, and we are defining which options we want right here. So we need to follow and type exactly what they said in their documentation to type.

The next one is going to be showFiletypeIcon, and this is gonna be true, it's a boolean value. And this next one's kind of cool, it is a postUrl. Now, this is a little bit of a hack, but DropzoneComponent usually is built for people who want to build in a feature where you upload the image and then the image automatically goes and it hits an API and it starts uploading.

We don't want that, we want to be able to upload the file and then keep working on the form and then only when we hit Submit do we want the file passed to the API. So what we're doing here is we're going to pass in a mock URL, it will be mocked, which means it's going to almost kind of like pretend to hit this URL.

This URL will always return true, it'll always return successful, and what this is going to do is give us some cool animations when the file is accepted. So that's what we're doing here, is we're just putting in a URL that the system's gonna use and it's going to always return true and it's going to give us a cool little checkmark when the file gets added.

So postUrl is going to call https://httpbin.org/post, and so this is a special URL, httpbin, that allows you to call it. It will not even look at the data, it simply allows you to call with different types of HTTP verbs, and it always returns true, it's just a way of mocking a URL. So that is everything we need for the componentConfig.

portfolio-forms.js

componentConfig() {
  return {
    iconFiletypes: [".jpg", ".png"],
    showFiletypeIcon: true,
    postUrl: "https://httpbin.org/post"
  }
}

We will eventually also add it to our constructor. But before you do that, we have another configuration method here, and that is going to be djsConfig, and inside of here we're gonna have just a couple more options.

So I'm going to return an object here and then I'm going to say that I want to allow for addRemoveLinks, so this is gonna be true. And then my maxFiles is going to be one because remember we're gonna have three files, but we're breaking them into their own components, so we only wanna allow for a max file size of one.

And these are the first two configuration methods, so we also need to add these so that we can call them and pass them into the component because we're gonna pass these as props into the DropzoneComponent. So I'll say this.componentConfig = this.componentConfig bind to this, and then we're gonna do the same thing for this.djsConfig = this.djsConfig.bind and this.

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

Okay, so we have added all of the configuration items. Let's see if we call this now from the JSX let's see if it'll work. So I'm gonna come all the way down below the text area I'm gonna add a new div here. And just to make it clear that this is where all of our image uploaders are gonna go, I'm going to already add a className even though we haven't added any styles yet.

I'm gonna add a className of image-uploaders, and so this is gonna be the wrapper div for our three image uploaders. And so now we can call the DropzoneComponent that we imported at the very top, and we're gonna pass in a couple of props. So we're gonna first pass in a configuration prop, which that is gonna be this.componentConfig.

And then we're also going to pass in the djsConfig, and as you may have guessed, that's gonna be that djsConfig method, and that's getting passed as a prop, then we're going to close it, it's not gonna be a self-closing tag. And then we're going to add the actual DropzoneComponent closing tag here, and I'm gonna explain later why we're not using a self-closing tag.

But for right now we can just have it just like this. And oh, you know what, actually pretty already added that but I'll walkthrough, we're gonna break it into a separated parent component in a little bit.

portfolio-form.js

<div className="image-uploaders">
  <DropzoneComponent
    config={this.componentConfig}
    djsConfig={this.djsConfig}
  />
</div>

But for right now, let's just confirm that this is working. So we wrote a lot of code, let's check in the browser, hit refresh, and it looks like we have a little bug. Let's see if we have a typo or what the issue is. So it says warning, can't perform React state on an unmounted component. Keep going up because that's not the core error. Okay, there we go, no URL provided.

So let's see exactly what this issue is, I'm gonna come up here to the configuration item, so we have djsConfig, then we have the componentConfig, postUrl, all of that appears to be working. So let's see, oh, you know what, I know exactly what it is.

So when you call componentConfig, I was passing this like a regular call back, we have to actually call the method. The only reason I knew that that's what the mistake was, was because if you come up here, these values and I'm kind of glad we saw this error because this is one that doesn't come up as often, but when you see something like this, because we know we passed in the URL but what happened is because we hadn't actually invoked the function, this had not been returned yet.

So hopefully that kind of makes sense, if you come down here and look at the function, what happened here is I said, okay, this .componentConfig, and we called it but the function itself didn't run, we were passing it almost like a callback, in other words, the DropzoneComponent itself was gonna have to call it directly.

But what we wanted here was actually the opposite, we wanted this to run right away. And so you can add the parens at the very end of that and that'll fix it. Okay, so now if you hit save, now this should fix it. So yes, that is all good.

Let me clear these errors out, hit refresh to make sure we don't have any warnings. And no, it looks like it's all good. And look at that, we have our own little Dropzone Component. And if I click here, and you can pick out any image files, either jpg or png on your system and click on it, you'll see it mocks that it upload it. So it gave us that cool little checkmark. If you hover over, it gives the file name, you can even click remove file.

You could upload another one. It generates the preview. That's really cool. We still have some styles, as you can see it's kind of ugly how it has that white background and those kinds of things, and obviously we're not actually adding this file to state yet.

But this is pretty cool. We now have the ability to add images directly from our system and have the preview generated, so I am very happy with that. So now that we have that in place, let's start building it out even more. And that's what we're gonna do in the next guide.

Resources

• Source Code