Store File in MySQL Database and View using Vanilla JS and Node.JS

Published in

Nerd For Tech

3 min readMay 13, 2021

There are several methods for uploading files and saving them on the Server. In this tutorial, we will implement how to read files using Vanilla Javascript, save file’s binary data in MySQL DB using Node.JS, and view them.

JS code implementation will be the same for all JS frameworks. I assume you have Node.JS basic development knowledge and phpMyAdmin installed in your system.

Let’s dive into implementation.

Create Project

Install following modules.

npm i express ejs mysql

npm i -D nodemon

The project Structure should be like the following.

Implementation

Run the following SQL command in phpMyAdmin to create a table.

We will use the LONGBLOB data type to store the file’s binary data. LONGBLOB is a type of BLOB(Binary Large Object) with a maximum length of 4294967295 characters.

Let’s setup API code for rendering HTML pages and saving file’s data in DB;

Place below code in server.js file.

In the config object, place your MySQL user, password, and concerned database name.

GET “/”:- It will render the page for uploading files.
POST “/store”:- It will extract the file’s data from Request Body and store it in the Database.
GET “/image/:id”:- It will fetch file data from Database using id from params and send to UI to show.

Let’s implement UI side code.

Place below code in index.ejs

Let’s see what’s happening in the above code.

I have attached an onchange event to file input field which trigerrs upon loading files.

FileReader object lets web application to read the file or raw data buffers asynchronously from user’s computer which can be retrieved from File or Blob object.

File object may be obtained from FileList object returned as a result of selecting the file from input element.

FileReader can only access the contents of files that the user has loaded through the Input field or drag and drop. It can’t access files via a pathname.

It has a couple of event handlers and methods, here we are using three of them.

FileReader.onload:- This event is triggered each time the reading operation is successfully completed.
FileReader.onerror:- This event is triggered each time the reading operation encounter an error.
FileReader.readAsDataURL():- Starts reading of the specified Blob or File, once finished, the result attribute data: URL which represents file’s data.

After receiving the saved file id response from the server, we are removing the input field and redirecting the user to “/image/{fileid}” where the user will be able to view the loaded image.

Place below code in imageView.ejs

In this file, we recieve <%= name %> data from /image/:id route.

Now do npm start, go to http://localhost:3000.

Upload a file and you will be redirected to another page where you will be able to view the uploaded image.

You can open phpMyAdmin and check for stored records like below.