0

i want to upload image using angularjs or html5,Express.jsjs and mongodb.i have followed tutorials i can't able to upload the image to upload folder please some one help me how to do that.below i have given my schema code

my schema
var UserSchema = new Schema({
    UserName: {
        type: String,
        default: '',
        trim: true,
    },
    Avatar: {
        type: String,
        default: '',
        trim: true

    },
    Email: {
        type: String,
        default: '',
        trim: true
    },
    Password: {
        type: String,
        default: '',
        trim: true
    }
});

i want to upload the image with user details

<form action="/upload" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="Avatar" id="fileToUpload">
    <input type="text" name="UserName" id="name">
    <input type="email" name="Email" id="email">
    <input type="password" name="Password" id="password">
    <input type="submit" value="Upload File" name="submit">
</form>

one more thing i want to store image to some folder like upload and path should be store in database.help me out .thanks for your response

3
  • Can you try github.com/balderdashy/skipper - Worked like a charm for me. Commented Jul 21, 2015 at 8:46
  • please can you share your routes and controller Commented Jul 21, 2015 at 9:09
  • after uploadiing i am gettiing response like this {"message":"0 file(s) uploaded successfully!","files":[]} Commented Jul 21, 2015 at 13:32

2 Answers 2

2

You can use nodejs formidable and fs-extra module for creating folder to store image in your application.Try this

var fs = require('fs-extra');
var formidable = require('formidable');
var EmpDetail   = require('../models/employee.model.js');//This line means that I am having my schema code.
var    util = require('util');


app.route('/upload').post(function(req,res){

res.json({success:true});

var empData = new EmpDetail();//Here I created object to call my schema values.

var form   =  new formidable.IncomingForm();
console.log(req.body,'req.body');
form.parse(req,function(err,fields,files){
    console.log('dfgbfbf');
    util.inspect({fields: fields, files: files});
});

form.on('field',function(name,value){//This means your html input fields
    console.log('fields',name,value);
    if(name == 'fullName'){
        console.log('here',value);
        empData.fullName = value;
    }
    if(name == 'fatherName'){
        empData.fatherName = value;
    }
    if(name == 'dt'){
        empData.DOB = value;
    }
});
form.on('file',function(field, file){//This means on click of file it gets that file.
    console.log(file.name,'hjgjg');
    var temp = file.path;
    console.log(temp,'temp',file.name);
    var fileName = file.name;
        var fileName = file.name;
        var location     = 'images/';
        var cpLocation   = 'empDetails/images/';
        empData.imgSize = file.size;
        empData.imgType = file.type;
        empData.picFile = location+fileName;//Here PicFile is name of Avatar in model
fs.copy(temp,cpLocation+fileName ,function(err){//This means it create a folder and name of the image in your app.
        if(err)
        {
            console.log(err);
        }
    });

});
form.on('end',function(fields, files){

        empData.save(function(err,resobj){
            if(err)
            {    
               throw err;
            }
        });
});
});
Sign up to request clarification or add additional context in comments.

Comments

0

There is a small node module called skipper which can handle file uploads. Install it with: npm install skipper --save. Since you are using express your main file should look something like this:

var express = require('express');
var app = express();

app.use(require('skipper')());

app.post('/upload', function (req, res) {
  req.file('avatar').upload(function (err, uploadedFiles) {

  if (err) return res.send(500, err);
    return res.json({
      message: uploadedFiles.length + ' file(s) uploaded successfully!',
      files: uploadedFiles
    });
  });
});

And your html form should look something like:

<form action="/upload" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="avatar" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit">
</form>

Note: This route will return json object.

5 Comments

where it can upload folder or database
Please check out the options in skipper: github.com/balderdashy/skipper#options
after uploading i am getting response like this {"message":"0 file(s) uploaded successfully!","files":[]}
For some reason the file is not uploaded. Print everything to find out what is the problem and double check names & paths. Also make sure that you have write/read permissions in the upload folder.
i am able to get everything except the path

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.