3

I am newcomer to node.js and express.

I am trying to create a Business Card Generator application using nodejs, express and MongoDB.

I have created a multi-step form in ejs and I want to store the inputted data in MongoDB. Can anyone please let me know how I can do that? Following is the ejs and js code snippets that i am trying to use.

The MongoDB schema also has been provided.

Thanks in advance.

<section class="multi_step_form">
    <form action="/blogs" method="POST" enctype="multipart/form-data" id="msform">
        <!-- Tittle -->
        <div class="tittle">
            <h2>New Card</h2>
        </div>
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Personal details</li>
            <li>About Section</li>
            <li>Product Section</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <div class="form-row align-items-center">
                <div class=" col-md-3 ">
                    <h5>Name</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control " placeholder="Name of the Card Holder" name="name " required>
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Company</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Name of the Company" name="company">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Designation</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Designation at the Company" name="designation">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Phone Number</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Phone Number" name="phone_no">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Email</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Email ID" name="email">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Address</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Address" name="address">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Profile Photo</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="image" id="image" class="form-control-file">
                </div>
            </div>
            <div class="form-group">
            </div>

            <button type="button " class="action-button previous_button ">Back</button>
            <button type="button " class="next action-button ">Continue</button>
        </fieldset>

        <fieldset>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Year of Establishment</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Year of Establishment of the Company" name="year_of_establishment">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Description</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Description about the Company" name="description">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Profile Photo</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="image" id="image" class="form-control-file">
                </div>
            </div>
            <button type="button " class="action-button previous previous_button ">Back</button>
            <button type="button " class="next action-button ">Continue</button>
        </fieldset>
        <fieldset>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Product 1</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Name of product" name="product">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Description</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Description about the product" name="product_desc">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Product Images</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="product_img" id="image" class="form-control-file">
                </div>
            </div>

            <button type="button " class="action-button previous previous_button ">Back</button>
            <button type="submit" class="action-button ">Save</a></button>
        </fieldset>
    </form>
</section>
<!-- End Multi step form -->


router.post('/', upload.single('image'), async(request, response) => {
    console.log(request.file);
    console.log(request.body);
    let blog = new Blog({
        name: request.body.name,
        company: request.body.company,
        designation: request.body.designation,
        phone_no: request.body.phone_no,
        address: request.body.address,
        img: request.file.filename,
        year_of_establishment: request.body.year_of_establishment,
        description: request.body.description,
        product_name: request.body.product_name,
        product_desc: request.body.product_desc,
        product_img: request.file.filename,
    });

    try {
        blog = await blog.save();
        response.redirect('blogs/editAbout');
        //response.redirect(`blogs/${blog.slug}`);
    } catch (error) {
        console.log(error);
    }
});

const blogSchema = new mongoose.Schema({ name: { type: String,

},
img: {
    type: String,

},
company: {
    type: String,
    //required: true,
},
designation: {
    type: String,
},
phone_no: {
    type: String,
},
address: {
    type: String,
},
year_of_establishment: {
    type: String,
},
description: {
    type: String,
},
product_name: {
    type: String,
},
product_desc: {
    type: String,
},
product_img: {
    type: String,
},


timeCreated: {
    type: Date,
    default: () => Date.now(),
},
/*snippet: {
    type: String,
},*/

slug: { type: String, slug: 'name', unique: true, slug_padding_size: 2 },

});

Improve this question
0

2 Answers 2

Reset to default
1 
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <section class="multi_step_form">
      <form action="/blogs" method="POST"  enctype="multipart/form-data" id="msform">
          <!-- Tittle -->
          <div class="tittle">
              <h2>New Card</h2>
          </div>
          <!-- progressbar -->
          <ul id="progressbar">
              <li class="active">Personal details</li>
              <li>About Section</li>
              <li>Product Section</li>
          </ul>
          <!-- fieldsets -->
          <fieldset>
              <div class="form-row align-items-center">
                  <div class=" col-md-3 ">
                      <h5>Name</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control " placeholder="Name of the Card Holder" name="name " required>
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Company</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Name of the Company" name="company">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Designation</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Designation at the Company" name="designation">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Phone Number</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Phone Number" name="phone_no">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Email</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Email ID" name="email">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Address</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Address" name="address">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Profile Photo</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image"   class="form-control-file">
                  </div>
              </div>
              <div class="form-group">
              </div>
  
              <button type="button " class="action-button previous_button ">Back</button>
              <button type="button " class="next action-button ">Continue</button>
          </fieldset>
  
          <fieldset>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Year of Establishment</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Year of Establishment of the Company" name="year_of_establishment">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Description</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Description about the Company" name="description">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Profile Photo</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image" multiple class="form-control-file">
                  </div>
              </div>
              <button type="button " class="action-button previous previous_button ">Back</button>
              <button type="button " class="next action-button ">Continue</button>
          </fieldset>
          <fieldset>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Product 1</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Name of product" name="product">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Description</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Description about the product" name="product_desc">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Product Images</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image" multiple class="form-control-file">
                  </div>
              </div>
  
              <button type="button " class="action-button previous previous_button ">Back</button>
              <button type="submit" class="action-button ">Save</a></button>
          </fieldset>
      </form>
  </section>
  </body>
</html>

        
        /* Schema */
        
        var mongoose=require('mongoose');
        mongoose.connect('mongodb://localhost:27017/mydb',
        {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
        useFindAndModify: false
        }
        );
        
        var conn=mongoose.connection;
        
        const blogSchema = new mongoose.Schema({ 
            
            name: { type: String },
        
            company: {type: String },
        
            designation: { type: String },
        
            phone_no: { type: String },
        
            email: { type: String },
        
            address: { type: String },
        
            year_of_establishment: { type: String },
            
            description: { type: String },
        
            product_name: { type: String},
        
            product_desc: { type: String},
            
            avtar: [String],
        
            timeCreated: { type: Date, default: () => Date.now()},
            
        });
        
        var BlogSchema = mongoose.model('BlogSchema',blogSchema);
        
        module.exports=BlogSchema;
        
        /* Use Routes */
        var express = require('express');
        var router = express.Router();
        const multer = require('multer');
        const path = require('path');
        const userModal = require("../modals/userSchema")
        //router.use(express.static(__dirname+'./public/'));
        
        
        var Storage=multer.diskStorage({
          destination:"./public/images",
          filename:(req,file,cb)=>{
            cb(null,file.fieldname+"_"+Date.now()+path.extname(file.originalname));
          }
        });
        
        var upload=multer({
        storage:Storage
        }).array('image');
        
        
        /* GET users listing. */
        router.post('/blogs', upload,  async(request, response) => {
           let arr=[];
          for(let i=0;i<request.files.length;i++){
             arr[i]=request.files[i].filename;
          }
          let user = new userModal({
              name: request.body.name,
              company: request.body.company,
              designation: request.body.designation,
              phone_no: request.body.phone_no,
              email:request.body.email,
              address: request.body.address,
              year_of_establishment: request.body.year_of_establishment,
              description: request.body.description,
              product_name: request.body.product_name,
              product_desc: request.body.product_desc,
              avtar: arr,
          });
        
          try {
              blog = await user.save();
          } catch (error) {
              console.log(error);
          }
        });[![enter image description here][1]][1]
        
    https://i.sstatic.net/XHGzn.png
            enter code here
        
        module.exports = router;
    [1]: https://i.sstatic.net/XHGzn.png
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks for your answer. Actually, I want to know how to post data into MongoDB once for all from the multi-step form that I have created. I would be really grateful if u can help me with this regard
Try this Code and Please mark the best answer this code
0

By default, NodeJS / Express don't submit multipart-form data to the controller. The request's body will be empty.

You can use Multer to handle it:

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

app.post("/legitimation/process", upload.none(), async (req, res) => {
    console.log(req.body);
    res.redirect("/legitimation/id-now");
});

See this reference

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.