DEV Community

loading...
Cover image for Upload images with React, ExpressJS and mySQL

Upload images with React, ExpressJS and mySQL

maureenoldyck profile image Maureen ・5 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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.

Multer

For CORS, you also need to specify some CORS options, mine are like this:

CORS

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
Enter fullscreen mode Exit fullscreen mode

When that is installed, make a simple database connection like so ⬇️
Database Connection

For easier understanding, this is how my final map structure looks like:
File Structure

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} />
Enter fullscreen mode Exit fullscreen mode

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.

POST fetch

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) => {
Enter fullscreen mode Exit fullscreen mode

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!'})};
Enter fullscreen mode Exit fullscreen mode

3.3 POST SQL

const image = req.file.filename;
Enter fullscreen mode Exit fullscreen mode

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) => {
Enter fullscreen mode Exit fullscreen mode

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

POST Query

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('');
Enter fullscreen mode Exit fullscreen mode

&&

<h2> {uploadStatus} </h2>
Enter fullscreen mode Exit fullscreen mode

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, '/')));
Enter fullscreen mode Exit fullscreen mode

4.1 GET SQL request

Next, we need to create a GET API and SQL query to get the data we need.

GET SQL

4.2 Display image

Like as we did a POST fetch, to get the data we need to do a GET fetch.

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"/>}
Enter fullscreen mode Exit fullscreen mode

Lastly, npm start both your client and server folder. Here is the result:

Final 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

Discussion (5)

pic
Editor guide
Collapse
lennym profile image
Lenny Martin • Edited

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.static to serve your project's root directory, including the file containing your database credentials.

In this instance at the very least you should do:

app.use('/uploads', express.static(path.resolve(__dirname, './uploads')));
Enter fullscreen mode Exit fullscreen mode

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

Collapse
jbetts97 profile image
Joseph Betts

Very useful article Maureen! Thanks 😀

Collapse
maureenoldyck profile image
Maureen Author

Happy you like it Joseph! :)

Collapse
danielkrupnyy profile image
Daniel Krupnyy

Cool article! Thank you 😊

Collapse
maureenoldyck profile image
Maureen Author

Thank you Daniel! :)