Upload images with React, ExpressJS and mySQL

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 ⬇️

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.

Icon I used as image is from flaticon.com

Header image is by Marcel Friedrich on Unsplash