1

I have this task page and want to upload a file with the form submit to the NodeJs express server. 

@Component({
    selector: 'tasks',
    template: `<div mdl class="mdl-grid demo-content">

          <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
                <h3>Create Task Page</h3>

                <form action="#" (ngSubmit)="onSubmit()">
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="taskname" [(ngModel)]="data.taskname"/>
                    <label class="mdl-textfield__label" for="taskname">Task Name</label>                   
                   </div> <br/>
                  <div class="mdl-textfield mdl-js-textfield">
                    <textarea class="mdl-textfield__input" type="text" rows= "5" id="taskdesc" [(ngModel)]="data.taskdesc"></textarea>
                    <label class="mdl-textfield__label" for="taskdesc">Task Description</label>
                  </div> <br/>
                 <select [(ngModel)]="data.assignedto">
                      <option *ngFor="#assign of dropdownValues" [ngValue]="assign.userEmail">{{assign.userEmail}}</option>
                  </select>

                 <div> <input type="file" placeholder="Upload file..."></div>    <--How to handle this ? 

                <br/><br/>  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">Create Task</button>
                </form>          
          </div>       

    `,
    directives: [ROUTER_DIRECTIVES, MDL]
})

export class CreateTaskComponent implements OnInit {

    data: any;

    onSubmit(form) {
    console.log(JSON.stringify(this.data));    
    this.apartmentService.postTasks(this.data).then(_=>this.router.navigate(['Tasks']));   
    this.data = {};
    }

}

The data is posted to the expressjs server as follows

Server.ts 

router.route('/api/newtask')
    .post(function(req, res) {        
        var task = new Task();
        task.taskname = req.body.taskname;
        task.taskdesc = req.body.taskdesc;
        task.assignedto = req.body.assignedto;
        task.taskstatus = 'OPEN';
        task.save(function(err) {
            if (err)
                res.send(err);
            res.json({ message: 'Task created!' });
        });
  })

The mongoose mondel for the mongodb is as follows.

Mongoose Model 

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var TaskSchema = new Schema({
  taskname: String,
  taskdesc: String,
  taskcreator:String,
  createddate: String,
  assignedto: String,
  taskstatus: String
 });

module.exports = mongoose.model('Task', TaskSchema);

How can I upload a file and associate it with the current data on the form ?

user2180794
  • 1,425
  • 7
  • 27
  • 50

1 Answers1

0

plz see this article https://www.npmjs.com/package/multer you can use multer in server side and very easy :

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file 
  // req.body will hold the text fields, if there were any 
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files 
  // req.body will contain the text fields, if there were any 
})

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files 
  // 
  // e.g. 
  //  req.files['avatar'][0] -> File 
  //  req.files['gallery'] -> Array 
  // 
  // req.body will contain the text fields, if there were any 
})
  • Yes, i got Multer to work, but not sure how to handle the form data. Need to associate the file with the form data. – user2180794 Jun 11 '16 at 17:45
  • 1
    And plz see this : `http://stackoverflow.com/questions/32423348/angular2-post-uploaded-file` –  Jun 11 '16 at 17:52