- Read Tutorial
- Watch Guide Video
In this next set of guides, we are going to learn how to upload images. And this is gonna be really cool because this is something that nearly every application needs in some form or another. And React has some very specific requirements when it comes to being able to perform this task.
So with that in mind, we are going to start slowing things down a little bit in how we go through these next steps to make sure that you understand everything that we are doing when it comes to image uploading so that when you go out into the world and you start building your own applications or you're asked to build applications that need this feature you'll understand exactly what is going on.
So I'm going to start by installing a very very powerful library called Dropzone, and specifically, it's called React Dropzone Component. There are many different forms of Dropzone and if you just Google it, if you just looked for Dropzone, you would find all kinds of different tools that Dropzone provides.
I'll zoom out a little bit so it's easier to see. So Dropzone is a JavaScript library and it has some great features. It is more of an abstract library, so this is not something specific to React, this is used in many different JavaScript applications.
I have multiple view JS applications I built out and I used a form of Dropzone in those. So this is a 100% JavaScript, but what developers did in the open-source community is they saw that Dropzone is great but it's much easier to work with when there are connectors and kind of like plugins that are made for specific libraries and frameworks.
So what we're going to be using is a very specific framework or a very specific library called React Dropzone Component, and you can search on NPM for it and there it is, React Dropzone Component, not to be confused with React Dropzone.
I like this because it is more component-based and I've tried out both of the options and I actually enjoyed working with React Dropzone Component more than all of the other ones. So I'm going to copy this install tag right here,
npm i react-dropzone-component
switch to Visual Studio Code, and you can just run it directly in the terminal. So this is going to go out to NPM and it's going to pull in this dependency, and then in the next guide, we're going to start importing and configuring it directly into our portfolio form.
So depending on how fast or slow your Internet connection is, along with how long NPM decides to take, it might take a few minutes, and it looks like it is done.
And I will also point out, do you notice here how any time that you run an NPM install command you might see some either warnings or errors right here? And so let's walk through these because we only spent a little time on the installation process.
So right here it added the packages, so that's good, and so that means everything worked on that side. But during that process, NPM also checks for security vulnerabilities and it found that there was one with a high severity vulnerability.
So we can actually fix this with one command, typically running npm audit fix is going to take care of it, and so it's not magically taking care of it. What usually happens in the open-source community is when someone finds that a specific library or package has a security vulnerability it gets reported. The patch is then updated, so the version for that library gets updated, and then from there when you run NPM audit fix it'll bring that latest patch down, and then typically it will work.
So if you want to take a look at what is causing it, I can run npm audit, and when you're going through this most likely you'll have this occur at different times because I'm recording this on a specific day in a specific year. If you go through this a year from now then you'll most likely have different times when this occurs. But if I type NPM audit, you can see that it gives us instructions on exactly where this is occurring.
Now, it says that it is a large issue because it's using webpack-dev-server and there was a missing origin validation. This is not a gigantic issue because we're only using webpack dev server on our local machine. So it's not a huge vulnerability but we might as well fix it. So we can run an NPM audit fix and that should take care of this automatically.
It'll go out, it'll find the latest version that will still work with everything that we have on our local system and it will correct it. My personal preference is to do this as quickly as possible so that you do not let these things drag for a couple of reasons.
One, you could be leaving yourself open to a security vulnerability, that's bad enough by itself. But also I've discovered the longer I let these drag on before performing these updates and these installations, the larger chance is that one of the new versions will actually break the current application. So we wanna make sure that that doesn't happen.
And to verify this actually, let me just, I'm gonna open up my terminal here. I currently have it running the application. So let me stop this and I'm gonna run npm run start, and this is a good idea to do any time you have performed a security fix and if you've run npm audit fix because that could've brought in a different version into your application of a library that could cause an issue.
So let's test this out and see, it looks like everything compiled successfully. So it doesn't look like there's an issue. And if I come back to the portfolio, hit refresh, everything is still working.
So we are good to go, our system has now been fixed and that security vulnerability has been removed, and with the initial goal we had, we now have the Dropzone Component installed on the system, and in the next guide, we'll start integrating it.