- Screenshots
- In brief about upload.js and Usage

There is a good module for working with file uploads, called "Multer".
Based on Multer module, i made a JavaScript class to easily upload files with node.js, with a minimum necessary code.
This class, called uploadFile is exported as a module, and can be included with require().

Create a Node.js module to upload file with Multer

• You can create the files with the code presented in this page, or ..:
- Click this link to download the whole script: Node.js Simple Upload Files.

1. First, we have to install the Express and Multer modules with NPM (Node.js Package Manager).
Open the command line interface and tell NPM to download these packages.
npm install --save express

npm install --save multer
2. Lets create our module that uses multer to upload files, with options to set allowed file extensions and maximum file size for upload.
In the directory of your Node.js project create a file called "upload.js", and add this code (click on the code to select it):
//uploads file to server with multer module
class uploadFile {
  //set needed properties
  constructor(){
    this.multer = require('multer');
    this.destination = null;
    this.exts =['bmp', 'doc', 'flv', 'gif', 'jpg', 'jpe', 'json', 'mp3', 'mp4', 'pdf', 'png', 'txt']; //allowed extensions
    this.maxsize =3; //maximum allowed file size; in MB
    this.rewrite = true; //true=rewrite the file if exists; false=sets the file name: 'originalname-Date.now()'
    this.init();
  }

/*Sets properties, receives object:
 {
  destination: 'folder for uploaded file' (Required, default: null)
  exts: [array with allowed extensions] (Optional, default: ['bmp', 'doc', 'flv', 'gif', 'jpg', 'jpe', 'json', 'mp3', 'mp4', 'pdf', 'png', 'txt'])
  maxsize: integer number for maximum allowed file size, in MB (Optional, default: 3)
  rewrite: true or false (Optional, default: true); true=rewrite the file if exists; false=sets the file name: 'originalname-timestamp'
 }
*/
  set setProp(o){
    if(o.destination) this.destination = o.destination;
    if(o.exts) this.exts = o.exts;
    if(o.maxsize) this.maxsize = o.maxsize*1;
    if(o.rewrite) this.rewrite = o.rewrite;
  }

  //set main multer objects for upload
  init(){
    //sets destination folder and file name
    var storage = this.multer.diskStorage({
      destination: (req, file, cb)=>{
        cb(null, this.destination);
      },
      filename: (req, file, cb)=>{
        this.er_ext ='No valid extension.\n Allowed extensions: '+ this.exts.join(', ');
        //check extension
        var ext = file.originalname.match(/\.([A-z0-9]+)$/i);
        if(ext && ext[1]){
          ext = ext[1];
          for(var i=0; i<this.exts.length; i++){
            if(this.exts[i]==ext){
              this.er_ext ='';
              break;
            }
          }
        }

        //if no error, sets destination file name
        if(this.er_ext==''){
          if(this.rewrite ===true) var fname = file.originalname;
          else var fname = file.originalname.replace('.'+ext, '-'+Date.now()+'.'+ext);
          cb(null, fname);
        }
        else return cb(new Error(this.er_ext), false);
      }
    });
    //Acepts a single file with the name 'up_f'. This file will be stored in req.file
    this.upload = this.multer({storage: storage, limits:{ fileSize: this.maxsize*1024*1024 }}).single('up_f');

  }

  //Posting the file upload; Receives - req=request, res=response, cb=callback function
  //Returns an object in the callback function, with file data, or {err:'error message'} in case of error
  post(req, res, cb){
    if(this.destination ==null) return cb({err:"Set a destination folder for upload, with: dirUpload \n Example:\n upload.dirUpload = __dirname+'/uploads'"});
    else {
      // req.file is the `avatar` file; req.body will hold the text fields, if there were any 
      this.upload(req, res, (err)=>{
        if(err){
          if(this.er_ext !='') var re ={err:this.er_ext};
          else if(err.code =='LIMIT_FILE_SIZE') var re ={err:'File to large, maximum allowed size: '+ this.maxsize +' MB'};
          else var re ={err:err};
        }
        else {
          var re = req.file;
          console.log('File Uploaded');
        }

        return cb(re);
      });
    }
  }
}

//assign object of uploadFile class to module.exports
module.exports = new uploadFile();
3. Now we create a ".htm" file with the upload form and Ajax code that performs the upload without loading page.
Save the following code in a file called "form.htm", in the directory of your Node.js project:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Node.js Upload Files</title>
</head>
<body>
<h1>Node.js Upload Files</h1>
<pre id="resp">Here it shows server response</pre>
<form id="uploadf" enctype="multipart/form-data" action="/upload" method="post">
 <input type="file" name="up_f" id="up_f" />
 <input type="submit" value="Upload" name="submit" />
</form>
<script>
var resp = document.getElementById('resp');
var form = document.getElementById('uploadf'); //get the form

//sends form data with ajax to server
function sendFile(ev){
  ev.preventDefault();

  //get the form and send its data to server
  var data = new FormData(form);
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  req.open('post', form.action, true);
  req.send(data);

  //receives and parse response in JSON format
  req.onreadystatechange=function(){
    if(req.readyState ==4){
      var obr = JSON.parse(req.responseText.replace(/\\\\/g, '/'));
      if(obr){
        //HERE you can parse the obr JSON object

        if(obr.err) resp.innerHTML ='<h4 style="color:#ee0000">'+JSON.stringify(obr.err, null, 2).replace(/(^")|("$)/g, '').replace(/\\n/ig, '<br>')+'</h4>';
        else resp.innerHTML = JSON.stringify(obr, null, 2);
      }
    }
  };
  return false;
}

// calls sendFile() on submit
form.addEventListener('submit', sendFile, false);
</script>
</body>
</html>
- The JavaScript code in the "form.htm" file sends the form to server, and displays the response in web page.

4. Now, we create a "server.js" file that uses Express to serv the pages to browser, and the "upload.js" module to upload the file when form data is sent.
Copy and save the following code in a "server.js" file in the same directory:
const express = require('express');
const upload = require('./upload.js');
const port =8080;
const app = express();
app.set('port', port); 

//Showing form.htm file on homepage
app.get('/', (req, res)=>{
  res.sendFile(__dirname+'/form.htm');
});

/*
Before upload.post(), calls setProp() passing an object, to set destination folder (here 'uploads'), and other properties
Full object:
 {
  destination: 'folder for uploaded file' (Required, default: null)
  exts: [array with allowed extensions] (Optional, default: ['bmp', 'doc', 'flv', 'gif', 'jpg', 'jpe', 'json', 'mp3', 'mp4', 'pdf', 'png', 'txt'])
  maxsize: integer number for maximum allowed file size, in MB (Optional, default: 3); 0.5 = 500 KB
  rewrite: true or false (Optional, default: true); true=rewrite the file if exists; false=sets the file name: 'originalname-Date.now()'
 }
*/
upload.setProp ={destination: __dirname+'/uploads', exts:['jpg', 'png', 'mp3'], maxsize:0.5};

//calls upload.post() when POST request
app.post('/upload', (req, res)=>{
 //passes a callback function that receives an object with response: data of the uploaded file, or {err:'error message'} in case of error
  upload.post(req, res, (re)=>{
    //HERE you can parse the received object

    //outputs the object response as a JSON string
    res.end(JSON.stringify(re));
  });
});

var server = app.listen(port, ()=>{
  console.log('Listening on port ' + server.address().port);
});
- Run the "server.js" in command line interface.
node test/server.js
Access the server in your browser, on port 8080 ( //localhost:8080/ ).
- Now you can upload files on your server with Node.js.

• After the file is uploaded, the post() method of the "upload.js" module returns an object with file data in a callback function received as argument:
{
  "fieldname": "up_f",
  "originalname": "dolphin.jpg",
  "encoding": "7bit",
  "mimetype": "image/jpeg",
  "destination": "e:/nodejs/test_upload/uploads",
  "filename": "dolphin.jpg",
  "path": "e:/nodejs/test_upload/uploads/dolphin.jpg",
  "size": 3752
}
- or an object with error message in case of error: "{err:'error message'}"

Screenshots

The files for Node.js server and upload module, in a "test" directory:
Node.js upload test project

Object response with data of the uploaded file:
Node.js response upload file

Message in case of error:
Node.js upload test project

In brief about upload.js and Usage

upload.js is a module that simplifies the code for upload files in node.js projects. It is based on the Multer module.

- To download the script, click: Node.js Simple Upload Files

Usage:

1. Install the multer module with NPM from command line interface:
npm install --save multer
2. Copy "upload.js" and "form.htm" directly in your project directory.
3. Include "upload.js" in the Node.js server file:
const = require('./upload.js');
4. Set destination of the directory for upload files, with upload.setProp :
upload.setProp ={destination: __dirname+'/uploads'};
- Additionally, you can set other properties too: "exts", "maxsize", "rewrite" (see the comments in the upload.js file).

5. Show "form.htm" file on browser. Example with Express:
res.sendFile(__dirname+'/form.htm');
6. Call the upload.post() method when POST request with form data:
upload.post(req, res, callback);
"callback" is a callback function with an argument in which receives an object response from post() method.

- More important:
Have a Good life with everyone and with yourself.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Upload Files with Express and Multer

Last accessed pages

  1. HTML5 Quick Tutorial (3645)
  2. Create simple Website with PHP (15916)
  3. Mahjong Gardens (7308)
  4. Dolphin Olympics 2 (1830)
  5. Get the value of the selected /checked checkboxes in a form (28843)

Popular pages this month

  1. Qwop (10555)
  2. Drag Racer V3 (6224)
  3. Flash Games - Free online Games (2162)
  4. List with All the Games (2073)
  5. Bubbles3 (1996)