Flutter File upload using Multer,Node.js and MongoDB.
Dec 22, 2020 · 4 min read

Today we are going to talk about how we can integrate flutter with a node.js and MongoDB backend to store images on the server with the help of popular node.js package “Multer”.
What really is Multer?
Multer is a node.js middleware for handling multipart/form-data
, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.You can read the documentation here:
In this session,we are going to make a simple flutter app to pick image from the phone’s gallery and send it over the server and save it for later use using multer and MongoDB.
Let’s get started.
- First of all make a node.js folder using
npm init
and make a server.js file. - Let’s install the npm packages that we need for this project using the given command:
npm install express mongoose nodemon multer
- Import all the packages in your server file.
const express= require('express')
const multer=require('multer')
const path= require('path')
const app= express();
const mongoose= require('mongoose')
const model = require('./model')app.get('/',(req, res) => {
res.send('We are at home')
});
- Configure your multer storage parameters that includes which folder you would like to set for saving the incoming images and the name of the images to be set.
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, new Date().toISOString()+file.originalname
)
}
})
- Let’s set up our routes now to serve the incoming requests.
app.post('/upload', upload.single('myFile'), async(req, res, next) => { const file = req.file
if (!file) {
const error = new Error('Please upload a file') error.httpStatusCode = 400
return next("hey error")
}
const imagepost= new model({
image: file.path
})
const savedimage= await imagepost.save()
res.json(savedimage)
}) app.get('/image',async(req, res)=>{
const image = await model.find()
res.json(image)
})
- After setting up the routes,let’s connect our server to mongoDB using mongoose package.
mongoose.connect(YOUR_MONGODB_URL,{ useNewUrlParser: true },()=>{ console.log('db connnected')})app.listen(3000);
- We will be creating the collection model now which is already been used in the routes.
- Here’s the complete server.js code:
- Let’s create our model now that will help us upload image url’s in MongoDB.
- Make sure you make your uploads(The folder where all the incoming images will be saved) folder which is in the same folder as that of your node folder is statically available to your server.js code using this:
app.use('/uploads', express.static(__dirname +'/uploads'));
- We’re done with the backend part now,Let’s make our frontend using flutter.
- In the above code, we are picking up a image using image picker then reading the image as a bytes stream and later posting it to our node.js server using
Multipart Form
request.
Note: Make sure your use the same image name that you used in your node.js server i.e
myFile
here.
- After a succesfull post request you can see your image uploaded in
uploads
folder inside your node server folder.

- After successfull upload,we are saving the image path on to our
MongoDB
database in order to fetch that image later in your app.

- In order to fetch back all the image paths of all the images that got stored in the server,we are sending an http request which is collecting all the paths from mongodb and sending it back as a json file.
- After getting the image path,we can use it in our flutter app as:
Image.network("http://localhost:3000/IMAGE_PATH");//IMAGE_PATH: Path you got from MongoDB.
- That’s how you can use multer and MongoDB to store image on to your node.js server.
Buy me a Coffee:
That’s it for this article.See you guys in the next one!
