For a project I was working on, we wanted to upload images so users could change their profile picture. As a beginner in React and Node, it took me a little while to finally figure out how to upload an image. That’s why I thought it would be a great subject to write an article about.
This tutorial will explain you how I upload images in the backend, store the path to that image in our database and finally show the image on the frontend.
For this tutorial I used:
- ReactJS - ^17.0.1 - Frontend library
- NodeJs - ^14.15.4 - Runtime environment for the server
- Multer - ^1.4.2 - Middleware for handling multipart/form-data
- CORS - ^2.8.5 - Package for Cross-origin resource sharing
- ExpressJS - ^4.17.1 - Framework to build our application
- mySQL - ^2.18.1 - Database
- npm - ^6.14.10 - Package manager
1. Setup
First things first, create a map where you set-up a React app and ExpressJS. (Please note, NodeJS is already installed on my computer, if you don’t have Node and/or npm yet please follow these instructions: (https://nodejs.org/en/)
React
To create the frontend or "client" map, type in your terminal:
npx create-react-app client
Express & Multer & CORS
Create a server map in your root. Then in the terminal do:
cd server
npm init // To create packageJSON
npm install --save express multer cors
After that, create an index.js in the server map and require Express, cors and Multer like this ⬇️
javascript
const express = require('express')
const multer = require('multer');
const cors = require('cors')
For Multer, also set up a storage variable, that leads to the map you want your images to be stored (destination) and a filename, I used the original name of the picture here for filename.
For CORS, you also need to specify some CORS options, mine are like this:
We use CORS so that we can allow web browsers to access our APIs we are going to create.
mysql
In your server map install mysql, a node module that will allow you to connect to the database.
npm install mysql
When that is installed, make a simple database connection like so ⬇️
For easier understanding, this is how my final map structure looks like:
2. Code
Normally you would write this into a component, however for this tutorials sake I will write it straight into the App.js file.
2.1 Create input
Create an input that only allows images, one at a time.
<input type="file" name="image" accept="image/*" multiple={false} onChange={imageHandler} />
2.2 Access file with handler
To access the file we attach a handle to it with the onChange method. With this handle we can use the event object which gives access to file uploaded.
Then, we put that file inside a new FormData interface as it provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent to the server.
2.3 Send to backend with fetch post
We are writing this fetch API to get data from an external API (that we will create later in the server side). We set the method to POST because we want to send data, the data we want to send is inside the body. Here it is the formData variable.
3. Database query
3.1 API
In the previous step we wrote a fetch POST from an API that we are now going to create. We need to make sure the fetch info needs to be the same.
const path = require('path');
app.post("/api/image", upload.single('image'),(req, res, err) => {
Single stands for what type of multipart formdata we are expecting (in this case one image), and 'image' should be the value of the name attribute of your input.
3.2 Check for valid file extension
After that, we first want to check if the image uploaded is from a valid extension. This goes easily with an if statement:
if (!req.file.originalname.match(/\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/)) {
res.send({ msg:'Only image files (jpg, jpeg, png) are allowed!'})};
3.3 POST SQL
const image = req.file.filename;
Here we get the image pathname, that we will store in our database. In the instance that we already have a database with data and we just want to change the image, we use the UPDATE statement in the connection query.
const sqlInsert = UPDATE images SET `image` = ? WHERE id = ?;
connection.query(sqlInsert, [image, id] , (err, result) => {
This query will either give an error or result. We use res.send to send the data given by the database, to the client side with the API.
Here is what this whole query looks like in my code ⬇️
3.4 Display message
As you saw in the query part, we send 'msg' to the client side but we also need to create a variable for that inside our code. For that we create a state variable that I called uploadStatus here.
const [uploadStatus, setUploadStatus] = useState('');
&&
<h2> {uploadStatus} </h2>
4. Accessing the image
Now our image path is uploaded into our database, so now we can link that path to the image and finally display our image.
First, because we are storing our images inside our server map, we need to be able to access this map from our frontend as well, we can do that by this line of code :
app.use('/', express.static(path.join(__dirname, '/')));
4.1 GET SQL request
Next, we need to create a GET API and SQL query to get the data we need.
4.2 Display image
Like as we did a POST fetch, to get the data we need to do a GET fetch.
As you can see, to set state of the image we use the url to the backend server location.
Now the only thing we have to do is add the image path into the src of the image element.
{image && <img src={image} alt="img"/>}
Lastly, npm start both your client and server folder. Here is the result:
We made it to the end of the tutorial!
Hopefully this tutorial was helpful for you. If there is anything you would do different or make my code better, please do let me know as I am still a beginner and eager to learn.
Top comments (7)
There are some very serious security issues in the code here. I appreciate it was written by a beginner, but I would be very careful indeed about promoting this code as good practice.
Not least that you're configuring
express.staticto serve your project's root directory, including the file containing your database credentials.In this instance at the very least you should do:
Also, because you save the files directly to the statically served directory without doing any checks on their type or content a malicious user can upload any file to your server and have it served on your domain.
I would probably do the following:
a) check the type and content of uploaded files and prevent saving any which are not valid
b) not serve the uploads directory directly, but do a lookup of the requested file in the database before serving
Very useful article Maureen! Thanks 😀
Happy you like it Joseph! :)
Thank you
Cool article! Thank you 😊
Thank you Daniel! :)
can you post your github repository for this? I am stuck and would like to see your code for reference. Thanks