NodeJS/Express – Upload/Download MultiparFile to MySQL – Multer + Sequelize + JQuery Ajax + Bootstrap

In the tutorial, we show you how to upload/download MultipartFile to MySQL in NodeJS/Express web-application using Multer middleware, Sequelize ORM, JQuery Ajax & Bootstrap view.

Related posts:
NodeJS/Express – RestAPI to Upload Multipart File to MySQL using Multer + Sequelize ORM
NodeJS/Express – Upload/Download MultipartFiles/Images – Multer + JQuery Ajax + Bootstrap

Goal

Prerequisites

NodeJS/Express – RestAPI to Upload Multipart File to MySQL using Multer + Sequelize ORM
NodeJS/Express – Upload/Download MultipartFiles/Images – Multer + JQuery Ajax + Bootstrap

Objective

We build a NodeJS/Express web-application to upload/download multipartfile to MySQL.

Overview

Technologies:

  • NodeJS/Express
  • Multer middleware
  • Sequelize ORM
  • Bootstrap
  • JQuery Ajax
  • MySQL

Project structure:

-> Run:

NodeJS-Express-MySQL-Upload-MultipartFile-request-get-a-file-downloads-view

NodeJS-Express-MySQL-Upload-MultipartFile-request-mysql

Upload File

To upload MultipartFile, we use Multer middleware. Setup Mutter-Memory storage:

How to upload file and save it to MySQL?

– Router to handle uploaded-file from multipart/form-data:

– Now, upload-file is stored in req.file.buffer. Save it to MySQL with Sequelize ORM:

Download File

For getting file from MySQL then sending to client, we use Squelize ORM and stream module as below code:

Practice

Setting up NodeJS/Express project

Create a folder NodeJS-Express-MultipartFile-MySQL:

Then init NodeJS project:

-> Install Express, Multer, Sequelize, MySQL:

-> see package.json file:

Frontend
Bootstrap views

– Create ./views/index.html file:

– Create ./views/404.html file:

Jquery Ajax

– Create a JQuery Ajax POST multipart/form-data form, see ./resources/static/js/postrequest.js file:

– Create a Jquery Ajax GET, see ./resources/static/js/getrequest.js file:

Backend
Sequelize Model

– Create a File model, see ./app/models/file.model.js file:

Multer Config

– Create ./app/config/multer.config.js file:

Setting up MySQL connection

– Create ./app/config/env.js file:

– Setup MySQL connection with Sequelize in ./app/config/db.config.js file:

Express Routers

– Create ./app/routers/file.router.js file:

Download/Upload Controllers

– Create ./app/controllers/file.controller.js file:

Server.js

– Create ./server.js file:

Run & Check results

Start NodeJS server

-> Logs:

Upload Files

->NodeJS server’s Logs:

->Browser Network’s Logs:

NodeJS-Express-MySQL-Upload-MultipartFile-request-logs

-> Bootstrap view:

NodeJS-Express-MySQL-Upload-MultipartFile-request-bootstrap view

-> MySQL records:

NodeJS-Express-MySQL-Upload-MultipartFile-request-mysql

Get All Files

-> NodeJS server’s Logs:

-> Browser Network’s Logs:

NodeJS-Express-MySQL-Upload-MultipartFile-request-get-all-files-network-logs

-> Bootstrap view:

NodeJS-Express-MySQL-Upload-MultipartFile-getallfiles

Get a File

-> NodeJS server’s Logs:

-> Browser Network’s Logs:

NodeJS-Express-MySQL-Upload-MultipartFile-request-get-a-file-network-logs

-> Bootstrap view:

NodeJS-Express-MySQL-Upload-MultipartFile-request-get-a-file-downloads-view

Sourcecode

To run below sourcecode, follow the guides:


step 0: download & extract zip file -> we have a folder ‘NodeJS-Express-MultipartFile-MySQL’
step 1: cd NodeJS-Express-MultipartFile-MySQL
step 2: npm install express multer sequelize mysql2 –save
step 3: node server.js
step 4: makes a POST request: http://localhost:8081

-> Sourcecode:

NodeJS-Express-MultipartFile-MySQL

By grokonez | May 19, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*