Upload file via AngularJS and NodeJS,

Question

I am now using Express4 and want to upload files to the file system of the server. (for example, save the files in the public/files folder.)

There are several questions about how to user formidable or busboy to parse the request like this example:

var formidable = require('formidable'),
    http = require('http'),
    util = require('util');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload 
    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });

    return;
  }

  // show a file upload form 
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8080);

Such middleware could parse req to get the metadata, like the file path, name, size, etc. However, if I want to POST different files to different endpoints, I would like to use angularjs controller and service structure to process the uploading.

Wondering how can I get file path, name, etc to controller/service and post them to the backend. Then I can use the following codes to upload files.

api.post(url, function(req, res) {
  var fs = require('fs');
  //req.body.path: path of file, like, C:\\user\John\.....
  //req.body.filename: name of file, like images.jpg
  fs.readFile(req.body.path, function(err, data){
    var uploadToPath = './public/files/' + req.body.filename;

    fs.writeFile(uploadToPath, data, function(err){
      if(err) {
        res.send(err);
        return;
      }
    });
  });
});

I am also referring this solution, but it can only get the info like file size, but not the very important file path.

pls advise, many thanks.

technicallyjosh · Accepted Answer · 2015-11-18 20:02:37Z

3

For the node/express side:

Check out https://github.com/expressjs/multer

For the angular side:

Check out https://github.com/danialfarid/ng-file-upload

It makes uploading and saving single or multiple files super easy. They have an option in there for directory to automatically save to.

https://github.com/expressjs/multer#multeropts

answered Nov 18, 2015 at 20:02

technicallyjosh

3,53117 silver badges17 bronze badges

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

3 Comments

technicallyjosh Over a year ago

@LongshengZhou if this was the answer can you mark it please?

leonsPAPA Over a year ago

I am using another solution, but yeah, I will also mark yours as a good answer.

leonsPAPA Over a year ago

You too!@technicallyjosh

Ravenous · Accepted Answer · 2015-11-18 21:52:20Z

1

File path will be your file path in express. So if its in a route the path will be that directory. Use a node core module path = require ('path') that will expose __dirname that'll let you change the path using core modules where needed. Path is relative to your system you won't get the clients path with the post request.

EDIT: After reading the standard https://w3c.github.io/FileAPI/#attributes-blob

You can not get the file path. That's logical since that could be a potential privacy encroachment. If you're developing on node WebKit on the other hand your application would have access to users file system through the use of node core module path.

edited Nov 18, 2015 at 21:52

answered Nov 18, 2015 at 18:39

Ravenous

4935 silver badges15 bronze badges

2 Comments

leonsPAPA Over a year ago

Thank you, but i am confused. I am looking for the path of the file which is goingto be uploaded, like C:\\user\John\images\car.jpg, is that what you are answering?

Ravenous Over a year ago

So after digging in index.js of formidable I notice the function isn't looking for the potential file path associated with the client. In order to get it I'd suggest looking at MDN developer.mozilla.org/en-US/docs/Web/API/FormData/… which reveals that a blob can be sent to form data on file upload. So you'll need to start with the blob that's passed to form data to determine if javascript is even collecting that from the user blob.

Collectives™ on Stack Overflow

Upload file via AngularJS and NodeJS,

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related