nodejs form with multiple images + input fields

Question

I've spent pretty much almost a day to figure out this issue. I have created a feature in my project called "Add Product" and its working as I imagined it to. Whatsoever, I want users to be able to upload multiple images + all the input fields at once.

Basically, I want a user to fill in product title, description and all other fields, then select images for the product and when its all smacked up together, click submit and save the product.

I'm working Mean Stack and in my frontend which is Angular, managed to configure https://www.npmjs.com/package/angular-file-upload which works as it should for uploading images, whatsoever, I'm not sure how to make it with my original product form which users submits.

I've heard something about xhr2 and FormData but I'm a little bit lost now and could really use some help.

Thanks in advance, Alex

Tristan Foureur · Accepted Answer · 2015-04-10 15:48:18Z

1

You can access the uploaded files through req.files, example :

app.post('/route',function(req,res) {
  console.log(req.files);
});

With 2 images fields, myImage1 and myImage2, Would give you :

{
  myImage1: {
    size: 11885,
    path: '/tmp/1574bb60b4f7e0211fd9ab48f932f3ab',
    name: 'avatar.png',
    type: 'image/png',
    lastModifiedDate: Sun, 05 Feb 2012 05:31:09 GMT,
    _writeStream: {
      path: '/tmp/1574bb60b4f7e0211fd9ab48f932f3ab',
      fd: 14,
      writable: false,
      flags: 'w',
      encoding: 'binary',
      mode: 438,
      bytesWritten: 11885,
      busy: false,
      _queue: [],
      drainable: true
    },
    length: [Getter],
    filename: [Getter],
    mime: [Getter]
  },
  myImage2: {
    size: 88001,
    path: '/tmp/0b4f7e021574bb611fd9ab48f932f3ab',
    name: 'avatar.png',
    type: 'image/png',
    lastModifiedDate: Sun, 05 Feb 2012 05:31:09 GMT,
    _writeStream: {
      path: '/tmp/32f3ab1574bb60b4f7e0211fd9ab48f9',
      fd: 14,
      writable: false,
      flags: 'w',
      encoding: 'binary',
      mode: 438,
      bytesWritten: 88001,
      busy: false,
      _queue: [],
      drainable: true
    },
    length: [Getter],
    filename: [Getter],
    mime: [Getter]
  }
}

To save your file myImage1 :

fs.readFile(req.files.myImage1.path, function (err, data) {
  // ...
  var newPath = __dirname + "/uploads/uploadedFileName";
  fs.writeFile(newPath, data, function (err) {
    if(!err)
      console.log("ALL GOOD!");
  });
});

Source

answered Apr 10, 2015 at 15:48

Tristan Foureur

1,65710 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleksandar Grbic Over a year ago

Uploading images is not really an issue, this is the problem I solved already. Issue is uploading both, images and all the fields my form has, eg. Title, Description, Category etc and saving it all as a single product in mongodb (mongoose). So how do you get all this data in your backend and save it in a single mongoose query eg. Product.update()...

Collectives™ on Stack Overflow

nodejs form with multiple images + input fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related