How Do You Upload 5 Gb Files To A Web Server?

Read Time: 5 mins Languages:

When a web client uploads a file to a server, information technology is by and large submitted through a form and encoded asmultipart/form-information. Multer is middleware for Express and Node.js that makes information technology easy to handle thismultipart/form-data when your users upload files.

In this tutorial, I'll show you how to apply the Multer library to handle different file upload situations in Node.

How Does Multer Work?

Equally I said above, Multer is Express middleware. Middleware is a piece of software that connects different applications or software components. In Express, middleware processes and transforms incoming requests to the server. In our case, Multer acts equally a helper when uploading files.

Projection Setup

We will be using the Node Express framework for this project. Of grade, you'll need to have Node installed.

Create a directory for our project, navigate into the directory, and issue npm init to create a .json file that manages all the dependencies for our awarding.

mkdir upload-express cd  upload-express npm init

Next, install Multer, Limited, and the other dependencies necessary to bootstrap an Express app.

npm install express multer body-parser --save

Side by side, create aserver.js file.

bear upon server.js

Then, in server.js, we will initialize all the modules, create an Express app, and create a server for connecting to browsers.

// call all the required packages const express = require('express') const bodyParser= require('trunk-parser') const multer = crave('multer'); app.use(bodyParser.urlencoded({extended: true}))  const app = express()  //CREATE Express APP const app = express();  //ROUTES WILL Go HERE app.become('/', function(req, res) {     res.json({ message: 'WELCOME' });    });  app.listen(3000, () => console.log('Server started on port 3000'));

Running node server.js and navigating to localhost:3000 on your browser should give you the following bulletin.

Create the Client Lawmaking

The side by side affair will exist to create an index.html file to write all the code that volition exist served to the customer.

touch index.html

This file will incorporate the unlike forms that we will use for uploading our different file types.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>MY APP</championship> </head> <body>      <!--  SINGLE FILE --> <form action="/uploadfile" enctype="multipart/form-data" method="Mail service">     <input blazon="file" proper name="myFile" />    <input type="submit" value="Upload a file"/> </form>   <!-- MULTIPLE FILES -->  <form action="/uploadmultiple"  enctype="multipart/form-data" method="Post">   Select images: <input type="file" name="myFiles" multiple>   <input type="submit" value="Upload your files"/> </form>    <!--   PHOTO-->  <class action="/upload/photo" enctype="multipart/class-data" method="POST">    <input type="file" name="myImage" take="image/*" />   <input type="submit" value="Upload Photo"/> </form>    </body> </html>

Open upserver.js and write a Get route that renders theindex.html file instead of the "WELCOME" message.

// ROUTES app.get('/',part(req,res){   res.sendFile(__dirname + '/index.html');  });

Multer Storage

The next thing will be to ascertain a storage location for our files. Multer gives the selection of storing files to disk, as shown below. Hither, we gear up up a directory where all our files will exist saved, and we'll also give the files a new identifier.

//server.js   // SET STORAGE var storage = multer.diskStorage({   destination: function (req, file, cb) {     cb(null, 'uploads')   },   filename: office (req, file, cb) {     cb(nix, file.fieldname + '-' + Engagement.at present())   } })  var upload = multer({ storage: storage })

Handling File Uploads

Uploading a Single File

In the index.html file, we defined an action attribute that performs a POST request. At present we need to create an endpoint in the Express awarding. Open the server.js file and add the post-obit code:

app.post('/uploadfile', upload.single('myFile'), (req, res, side by side) => {   const file = req.file   if (!file) {     const fault = new Error('Please upload a file')     fault.httpStatusCode = 400     return next(error)   }     res.send(file)   })

Note that the name of the file field should exist the same as the myFile statement passed to the upload.single office.

Uploading Multiple Files

Uploading multiple files with Multer is like to a single file upload, but with a few changes.

//Uploading multiple files app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, adjacent) => {   const files = req.files   if (!files) {     const error = new Error('Please choose files')     fault.httpStatusCode = 400     return side by side(error)   }      res.send(files)   })

Uploading Images

Instead of saving uploaded images to the file arrangement, we will store them in a MongoDB database so that we tin retrieve them afterward as needed. But first, let's install MongoDB.

npm install mongodb --relieve

We will then connect to MongoDB through the Mongo.client method and then add the MongoDB URL to that method. You tin apply a cloud service like Mlab, which offers a free programme, or but utilize the locally available connection.

const MongoClient = require('mongodb').MongoClient const myurl = 'mongodb://localhost:27017';  MongoClient.connect(myurl, (err, customer) => {   if (err) return console.log(err)   db = client.db('exam')    app.listen(3000, () => {     console.log('listening on 3000')   }) })

Open server.js and ascertain a POST request that enables the saving of images to the database.

app.mail service('/uploadphoto', upload.single('flick'), (req, res) => {     var img = fs.readFileSync(req.file.path);  var encode_image = img.toString('base64');  // Define a JSONobject for the image attributes for saving to database    var finalImg = {       contentType: req.file.mimetype,       epitome:  new Buffer(encode_image, 'base64')    }; db.collection('quotes').insertOne(finalImg, (err, result) => {   	console.log(result)      if (err) render console.log(err)      console.log('saved to database')     res.redirect('/')           }) })

In the above code, we first encode the image to a base64 string, construct a new buffer from the base64 encoded string, and and so salvage information technology to our database collection in JSON format.

We then display a success bulletin and redirect the user to the index page.

Retrieving Stored Images

To retrieve the stored images, nosotros perform a MongoDB search using the discover method and return an array of results. We and so go on and obtain the _id attributes of all the images and render them to the user.

app.get('/photos', (req, res) => { db.collection('mycollection').find().toArray((err, result) => {        const imgArray= result.map(chemical element => element._id); 			console.log(imgArray);     if (err) return console.log(err)    res.send(imgArray)    }) });

Since we already know the id's of the images, we can view an image past passing its id in the browser, as illustrated below.

app.go('/photo/:id', (req, res) => { var filename = req.params.id;  db.drove('mycollection').findOne({'_id': ObjectId(filename) }, (err, result) => {      if (err) return panel.log(err)     res.contentType('paradigm/jpeg');    res.send(consequence.image.buffer)          }) })

Conclusion

I hope you institute this tutorial helpful. File upload can be an intimidating topic, but it doesn't accept to be hard to implement. With Express and Multer, treatment multipart/course-information is easy and straightforward.

You lot tin find the full source code for the file upload case in our GitHub repo.

Did you find this mail service useful?

Esther Vaati