Flutter File upload using Multer,Node.js and MongoDB.

Himanshu Ranjan
Dec 22, 2020 · 4 min read
Image for post
Image for post

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 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.
Image for post
Image for post
  • After successfull upload,we are saving the image path on to our MongoDB database in order to fetch that image later in your app.
Image for post
Image for post
  • 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("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!

Image for post
Image for post

Flutter Community

Articles and Stories from the Flutter Community

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.

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

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.

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