Loading...

Follow ProgrammerBlog.net | MongoDB on Feedspot

Continue with Google
Continue with Facebook
or

Valid
Last updated:21st August, 2018
NodeJS loopback RESTful API

Modern web and mobile apps often need to access backend servers using RESTful APIs. In this tutorial, you will learn to create a NodeJS loopback restful API with authentication. A bookstore API is created using Nodejs, MongoDB, and loopback. After that token based authenticated API is created. In a previous tutorial, we explored how to create NodeJS MongoDB RESTful API.

What is the loopback?

Loopback is an extensible nodejs framework. You can create dynamic APIs with loopback very easily.

Using Loopback you can 

Create CLI based apps

Setup token based authentication

Create data models for database

In this tutorial, following tasks are performed to create a nodejs loopback restful API

Install and run MongoDB, NodeJS, and NPM

Install loopback-cli module

Create a NodeJS loopback RESTful API

Create a new user

Login and logout a user

Setup token for authenticated requests

Create a Book Model

Fetch books information using Get HTTP method

Create a book using a  POST HTTP method with a token

Install and run MongoDB

In this nodejs loopback RESTful API, MongoDB database is used. To install MongoDB, visit MongoDB website, download and install it. For more information on setting up MongoDB locally, read this article.

Install NodeJS and NPM

Next, install NodeJS. Visit nodejs website, download and install. NPM is also installed with NodeJS installation. NPM is package manager for nodejs applications. Using NPM, packages and modules are installed.

Install loopback cli module

In order to create a nodejs loopback restful API, you need to install loopback cli module. Open command line and type.

npm i -g loopback-cli
Create nodejs loopback restful API

To create nodejs loopback restful API, lb command is used. On command line type

lb

This command opens a wizard on the command line. Select the options given below.

Enter the name of the application as nodejs-loopback-restful-API, the name of the directory is the same as the application.

Select loopback latest version. For kind of application select api-server. Next, select default options.

Loopback is installed with required dependencies. Change the directory using cd nodejs-loopback-restful. To run the application, type

node .

To view the running application, open browser, and type URL.

http://localhost:3000

You can view the output as a timestamp and uptime. To browse the nodejs loopback RESTful API, open /explorer route

http://localhost:3000/explorer
Nodejs loopback restful API explorer

You can view API, a User model with RESTful endpoints are created. Click on Users link and you can see all the requests with GET, PUT, POST, DELETE, PATCH HTTP methods. These requests are generated by loopback.

Loopback also provides login, logout, and user creation methods. Authentication can also be added to methods. If you start developing these methods with NodeJS and Express, it would be very complex and consumes a lot of time.

The file structure of the project

Open project in your favorite IDE such as Sublime text, Atom or Brackets. You can view different directories and files like the client, common, server, and package.json.

 Server directory contains boot folder, that has authenticates.js and root.js files. Other important files are config.json, datasource.json, and model-config.json.

Open datasource.json in the server directory. The default data source is the memory. MySQL, MongoDB, RedisPostgreSQL and more can be used. In this tutorial, MongoDB data source is used.

Create a MongoDB connector

In the datasource.json directory, you can view current db settings as memory. As Loopback RESTful API connects to MongoDB. A MongoDB connector is added.

{
"db": {
    "name": "db",
    "connector": "memory"
  }
}

To add MongoDB as the connector, type following command on CLI.

$ npm install --save loopback-connector-mongodb

After adding MongoDB connector, let us add MongoDB data source.

Add MongoDB data source

To add MongoDB data source, type command.

$ lb datasource mongoDS --connector mongoDB

In the command above data source name is mongoDS, with –connector flag, MongoDB is added. As you press enter, a wizard is run.

Name of a data source is mongoDS. Select the connector as MongoDB. There are other choices like Mysql, Oracle. PostgreSQL, Redis, and Cassandra etc.

Fro connection string, enter host as localhost, port as 27017, leave user and password as blank. Enter books as the database. If you open datasource.json, mogoDS config settings can be seen in the file.

"mongoDS": {
    "host": "localhost",
    "port": 27017,
    "url": "",
    "database": "books",
    "password": "",
    "name": "mongoDS",
    "user": "",
    "connector": "mongodb"
  }

remove default db datasource and add the new mongDS config to db.

"db": {
    "host": "localhost",
    "port": 27017,
    "url": "",
    "database": "books",
    "password": "",
    "name": "mongoDS",
    "user": "",
    "connector": "mongodb"
  }

In other files like model.config.js, db datasource is referred a default data source. Now MongoDB is connected with API.

Create a model for book

In this tutorial, a bookstore API is created so a model is created with the name book.

lb model

A wizard runs and it asks for the model name as the book, connector to attach is db connector, the model class is PersistedModel. This model is going to be exposed via a RESTful API.

Next is to add properties to the book model.

Book model is going to have nameauthor, category as the string, price as the number date_published as date property. When you are done with adding properties, Press enter key and wizard ends.

If you open common directorythere is a model directory created, with a book.js and book.json files.  In the book.json file, you can view all the properties that are added while creating the model. If you restart the server. Open the browser and go to  URL explorer

http://localhost:3000/explorer

You can see the book model link.

Nodejs loopback restful API book route

Click on book route. All HTTP methods available for a book can be viewed.

HTTP methods required for add, edit, delete or view books are added by API.

View books GET method

Click on GET /books route. On-screen click on Try it out button. A request is sent to the route

http://localhost:3000/api/books

Response code 200 and empty array is returned as result. The empty response is returned because no books are present in the database.

Add a new book using nodejs loopback restful API

Let us add a new book using loopback API. Click on POST /Books method. In data textarea, add book information. Click on Try It Out button. After Book is added successfully. A response code 200 and new generated Id is returned.

Book model has name, price, author, category, and date published fields.

Click on GET /books method and then on Try it out, You can view the newly added book. If you open MongoDB command line and type

show dbs

It will show all databases in MongoDB. Type command use books, the database is changed to books. Type show tables. Then type command

db.mongodb.find().pretty();

Using API, requests can be made to Book and User methods.

Add ACL or Access Control List to book model

To restrict access to add, edit, delete or display information to the authenticated users only, ACL feature can be added. Go to the command line and type

lb acl

ACL is applied to the book model’s methods and properties.

Open GET /books route and click on Try it out. A 401 response code with a message Authorization Required is returned.

Using any other method, same 401 response is returned. The application needs an access token to perform requests. So a user is logged in and access token is sent back. The token is set for all subsequent requests. Implementing token-based authentication for HTTP method is very easy using Loopback API.

Add a new user

Click on Post /Users route. In data, textarea add a user email as admin@example.com and password as 12345. Click on Try it out.

{

  "email": "admin@example.com",

  "password": "12345"

}

The response code 200 and user email and id returned.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Last updated:19th March, 2018
Nodejs file upload tutorial

File upload is an important feature in modern day web applications. In some previous tutorials, Dynamic PHP photo gallery and CodeIgniter File Upload were explored in detail. This tutorial is about nodejs file upload with MongoDB using multer package.

User uploads a photo with a caption to the server and is stored in a MongoDB database. Uploaded photos are displayed in a photo gallery. You will learn about mongoose, nodemon, multer packages and materialize framework.

Following tasks are performed in this tutorial.

1. Create a MongoDB database and a collection.

2. Create a Nodejs, ExpressJS application and a model for Photos

3. Install Mongoose, Multer and Nodemon modules and use materialize library.

4. Display uploaded photos to Photo Gallery

5. Create a form and upload photos to Photo Gallery

Install MongoDB and NodeJS

First, you need to install MongoDB and NodeJS on your system.

Install and run MongoDB

To install MongoDB, visit MongoDB website and download according to your operating system.

How to run MongoDB

If you are running MongoDB first time, create data directory because the mongod process needs to write to the data directory.  If you are using Windows create a directory data in C drive.

Then create a directory db inside it or on command line create a directory using command

mkdir -p /data/db

On command line open mongdb directory. Then go into bin directory. If system path variable is set, type mongod or ./mongod otherwise type mongoddbpath /path/to/data/directory.

Access interactive mongo shell

Open a second command prompt window to access interactive mongo shell. After setting system path, type mongo or ./bin/mongo. By default, MongoDB connects to localhost on port 27017.

To create or switch to a new database, run use [database name] command.

> use dbphotogallery

Uploaded photos and caption data is saved in photos collection in MongoDB database. Find command shows all the record in photos collection.

db.photos.find().pretty();
Install NodeJS

To install nodejs, visit nodejs website and download and run the installer. This will also install NPM or Node Package Manager. let us generate nodejs file upload application.

Install express generator

Express Generator is required to generate an express application. Express generator can be installed using NPM.

> npm install express-generator -g
Generate NodeJS File upload application using Express

Open the command line and go to the direcotry where you want to create your project. type following command.

express --view=pug nodejs-file-upload

Next, you need to install required dependencies. To install dependencies.

cd nodejs-file-upload && npm install
Install other modules

Some other modules are required to upload files and access database.

Install Nodemon

Nodemon monitors the application and if it detects a change in NodeJS code, it automatically restarts the server so changes can take effect.

npm install -g nodemon --save
Install Mongoose

Mongoose is used for MongoDB object modeling for NodeJS. We will insert and fetch records from MongoDB database using Mongoose.

npm i --save mongoose
Install Multer

Multer is a middleware used to handle file uploads in NodeJS.

npm install --save multer
Running nodejs file upload application

To run the application, on the command line, type

nodemon bin/www

Nodemon will run the server and watch for the changes in application. Open the browser and type the URL :

http://localhost:3000

You can view your application running.

Create Model for photos collection

In order to fetch or insert records to MongoDB, Mongoose is used.You need to create a Model for photos. So in the root folder create a new directory Models. Add a new file Photo.js.

var mongoose = require('mongoose');

var Schema = mongoose.Schema;

var photoSchema = new Schema({

  path:  { type: String },

  caption: { type: String }
  });

module.exports = mongoose.model('Photos', photoSchema);

Two fields are added to this model, Path to store the path of the uploaded file. Caption is added by the user for the uploaded photo. In the last, Photo model is exported using modules.exports.

Add a folder to upload files

Open the public folder and add a new folder called files in it. This folder is used to save user uploaded files.

Update layout.js file in Views

Open a layout.js file in Views directory and add the code below into it. Materialize library is used for front end. Materialize is modern and responsive front-end framework.

doctype html
html
  head
   link(href='https://fonts.googleapis.com/icon?family=Material+Icons', )

   link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css')
   link(rel='stylesheet', href='/stylesheets/style.css')
  
   meta(name='viewport', content='width=device-width, initial-scale=1.0')

   title Nodejs file upload with MongoDB

  body
    block content
    script(src='https://code.jquery.com/jquery-3.3.1.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js')

Matelize CSS and custom stylesheet is included.  After content block tag,  jQuery, materialize JavaScript files are included.

Create a form to upload a photo

Open index.pug file in views folder and add code.

form(action='/upload' method="POST" enctype="multipart/form-data")
      .row
        .col.s12
          if msg ==1
            .success
              | Photo uploaded successfully
          else if msg == 2
            .error
              | File size too large
          else if msg == 3
            .error
              | Invalid file type. Only JPG, PNG or GIF file are allowed.      
      .row
        .col.s12 
          .file-field.input-field
            .btn.grey
              span File
              input(type='file' name="photo" required)
            .file-path-wrapper
              input.file-path.validate(type='text' )
      .row
       .input-field.col.s12
        input#caption.validate(type='text' name="caption")
        label(for='caption') Caption 
      
      .row
        .col.s12 
          button.btn.waves-effect.waves-light(type='submit', name='action')
            | Upload
            i.material-icons.right send

Display photos in a photo gallery

Now you need to create a photo gallery to display photos.

.row
        .col.s12

         h4 Photo Gallery

      if photolist.length

         | <div >

         each pic, index in photolist

          |<div class ="col s3"><img src = #{pic['path']} alt="image"  /><p >#{pic['caption']}</p></div> 

          if (((index+1) % 4) == 0 )

           | </div><div >

      else

       .row

          .col.s12

            .caption No photos uploaded yet.
Connect to MongoDB Database

To connect to MongoDB database, open app.js file. Add this code below other require statements.

/* connect to database */

var mongoose = require('mongoose');

mongoose.Promise = global.Promise;

mongoose.connect('mongodb://localhost/dbphotogallery');

require("./models/Photo");

First, mongoose module is included, and Global promise is assigned to mongoose.promise. A database connection to dbphotogallery is made using mongoose.connect method on localhost server. Then Photo model is included.

Fetch all records from MongoDB

Let us fetch all photo paths and captions from photos collection. Open index.js file in routes folder. Include mongoose and Model.

var mongoose  = require('mongoose');

var Photo     = mongoose.model('Photos');

Go to ‘/’ route. Replace the code in the route with the code given below.

Photo.find({}, ['path','caption'], {sort:{ _id: -1} }, function(err, photos) {

    
     if(err) throw err;

     res.render('index', { title: 'NodeJS file upload tutorial', msg:req.query.msg, photolist : photos });
   
});

As you can see records are fetched using find method for the model.  Inside find method, {} represent the condition(Like Where clause in SQL), this is empty in this case.

Next, column values to be fetched are specified i-e: path and caption. The third argument is how you want to sort the records.  Records are sorted based on _id field in descending order.

In the callback function, error and photo records are returned. Index view is rendered with a msg flag used to display message and photos records are assigned to a photo list array.

NodeJS upload a file and insert to MongoDB

Form action is set to /upload route, note down the method POST and enctype = multipart/form-data. The user selects a file, adds a caption and clicks the upload button.

Add multer code to upload a file

Open routes folder and add a file uplaod.js. In uplaod.js add following code to upload the file to the server.

const multer = require('multer');
const path   = require('path');

/** Storage Engine */
const storageEngine = multer.diskStorage({
  destination: './public/files',
  filename: function(req, file, fn){
    fn(null,  new Date().getTime().toString()+'-'+file.fieldname+path.extname(file.originalname));
  }
}); 

//init

const upload =  multer({
  storage: storageEngine,
  limits: { fileSize:200000 },
  fileFilter: function(req, file, callback){
    validateFile(file, callback);
  }
}).single('photo');


var validateFile = function(file, cb ){
  allowedFileTypes = /jpeg|jpg|png|gif/;
  const extension = allowedFileTypes.test(path.extname(file.originalname).toLowerCase());
  const mimeType  = allowedFileTypes.test(file.mimetype);
  if(extension && mimeType){
    return cb(null, true);
  }else{
    cb("Invalid file type. Only JPEG, PNG and GIF file are allowed.")
  }
}


module.exports = upload;

Multer library is included and assigned to a constant multer. path variable is assigned from path module. Path module is used to work with file sand directories paths in NodeJS.

Define storage engine for multer

A storage engine is defined as diskStorage. Upload Destination is ‘./public/uplaods’ directory. Instead of saving file with its original name. A new file name is generated using a callback method. The original file name is concatenated with the current timestamp and converted to a string.

You can get a file name from file’s originalName property. Extension of the file is extracted using path module’s extname method. Uploaded file is passed to extname method.

Validating uploaded file

A utility method is created for validating mime type and file extension i-e png, jpg or gif. This method returns an error in case of incorrect file type or true otherwise.

Multer upload file method

multer upload method is defined with an object with storage engine and file size in bytes. fileFilter is assigned a validate file method. As a single file is uploaded, in single method file name is specified. Upload method is assigned to module.exports.

Nodejs file upload – upload route

Open index.js file in routes directory. Add include upload.js on top of the file.

var upload    = require('./upload');

After ‘/’ route add a new upload route with a POST method. A callback method accepts request and response objects.

router.post('/upload', function(req, res) { ... });
Nodejs file upload – insert record to MongoDB

To perform nodejs file upload using multer library and insert the record to MongoDB.

upload(req, res,(error) => {
      if(error){
         res.redirect('/?msg=3');
      }else{
        if(req.file == undefined){
          
          res.redirect('/?msg=2');

        }else{
             
            /**
             * Create new record in mongoDB
             */
            var fullPath = "files/"+req.file.filename;

            var document = {
              path:     fullPath, 
              caption:   req.body.caption
            };
  
          var photo = new Photo(document); 
          photo.save(function(error){
            if(error){ 
              throw error;
            } 
            res.redirect('/?msg=1');
         });
      }
    }
  });

In upload method request and response are passed. In the callback, an error is returned. On success, the user is redirected back to home page.

In else case, fullpath path is assigned to a variable. A JSON document is created with the path of file and caption of the photo.

A photo model object is created and the document is passed to it. photo.save() method is called with a callback method that returns an error if document is not saved. User is redirected back to home page with success flag on successful insertion.

You can view latest photo uploaded by the user.

How to run nodejs file upload application

If you are already running nodemon then you only need to open the browser and type the URL.

http://localhost:3000
Summary

To summarize, in this tutorial you have learned to install MongoDB and Nodejs. Created a Nodejs, Express application and installed mongoose, multer and nodemon modules.

Application’s front end is designed using materialize framework. A model is created for photos collection. Multer module is used to upload files to the server. Photo path and caption is inserted to MongoDB using mongoose.

Source code for this tutorial

Source code for this tutorial can found on Github. You can clone or download using this GitHub link.

Hope this tutorial is helpful to you. Leave your feedback or comments below. To stay updated with new articles and tutorials, follow us on twitter, like our Facebook page or subscribe to our newsletter.

Related Tutorials: Previous Tutorial:

The post Nodejs file upload with mongodb – create a photo gallery using multer appeared first on Tech blog for programming articles and video..

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview