Photo by Dan Gold on Unsplash

Upload and Download Images to a Postgres DB (node.js)

Project Setup

npm init -y
npm i express sequelize sequelize-cli multer

A Quick Summary of our App so far

User.init(
{
firstName: DataTypes.STRING,
lastName: DataTypes.STRING,
},
{
sequelize,
modelName: "User",
});
Project.init(
{
title: DataTypes.STRING,
description: DataTypes.TEXT,
userId: DataTypes.INTEGER,
},
{
sequelize,
modelName: "Project",
});
Project.init(
{
title: DataTypes.STRING,
description: DataTypes.TEXT,
userId: DataTypes.INTEGER,
// add the lines below
imageType: DataTypes.STRING,
imageName: DataTypes.STRING,
imageData: DataTypes.BLOB('long')
//add the lines above
},
{
sequelize,
modelName: "Project",
}
);
const createProject = async (req, res) => {
try {
const project = await Project.create({
title: req.body.title,
description: req.body.description,
userId: req.body.userId,
//add the lines below
imageType: req.file.mimetype,
imageName: req.file.originalname,
imageData: req.file.buffer,
//add the lines above
});
return res.status(201).json({ project });
} catch (error) {
return res.status(500).json({ error: error.message });
}
};

Retrieving your image from the DB

const getAllProjects = async (req, res) => {
try {
const projects = await Project.findAll({
include: [
{
model: User,
as: "createdBy",
},
],
})
.then(projects => {
projects.map(project => {
const projectImage = project.imageData.toString('base64')
project['imageData'] = projectImage
});
return projects;
})
.then(projects => {
return res.status(200).json({projects: projects})
})
} catch (error) {
return res.status(500).send(error.mesage);
}
};
"projects": [
{
"id": 3,
"title": "\"project created with image test\"",
"description": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt metus ipsum, id dictum quam eleifend quis. Sed ipsum odio, rutrum eget tincidunt ut, sollicitudin at nisi. Praesent dictum leo vitae lorem dictum, sit amet euismod orci euismod. Nam felis leo, fringilla ac mollis at, rhoncus ut augue. Etiam nunc mauris, fringilla vel fringilla in, aliquam at dolor. Morbi eget orci et libero laoreet pellentesque. Donec id feugiat massa, ut vestibulum ante.\"",
"userId": 1,
"imageType": "image/png",
"imageName": "Rectangle.png",
"imageData": "<A HUGE STRING OF RANDOM NUMBERS AND LETTERS
REPRESENTING OUR IMAGE>",
"createdAt": "2020-11-03T23:20:58.529Z",
"updatedAt": "2020-11-03T23:20:58.529Z",
"createdBy": {
"id": 1,
"firstName": "Testing",
"lastName": "Project with Image",
"createdAt": "2020-11-03T23:20:53.415Z",
"updatedAt": "2020-11-03T23:20:53.415Z"
}
}
]
}
//make sure your image format is correct.
// For jpeg
<img src="data:image/jpeg;base64, <YOUR BASE64 STRING>" alt="Alt Text" />//For png<img src="data:image/png;base64, <YOUR BASE64 STRING>" alt="Alt Text" />

Happy Hacking!

Resources:

Full- Stack Software Engineer with a former life in high-end restaurant management. Currently working in React JS and Ruby on Rails.

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