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

Sankhadip Samanta
May 13 · 3 min read

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.

phpMyAdmin

If you are having any questions, leave a comment.

Check out the Github repository for source code.

Sankhadip Samanta

Software Developer, Code Quotient | Tech Writer

Find me on Linkedin 😃 and Github 😅

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Sankhadip Samanta

Written by

Full Stack Software Developer | Tech Enthusiastic | Arising Blogger | Javascripter

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store