What is the best way to include data with a file when making an HTTP POST request with AngularJS and ExpressJS?

Question

What is the best way to include data with a file when making an HTTP POST request with AngularJS and ExpressJS?

Situation

I recently added file uploading functionality to my project. The front-end code was sourced from a popular tutorial on tutorialspoint. I am using the following service to send a POST request:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        
        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })
        
        .success(function(){
        })
       
        .error(function(){
         });
        }
    }]);

The back-end uses multer in a typical way:

exports.postFile = function (req, res) {

    var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            cb(null, '../documents/')
        },
        filename: function (req, file, cb) {
            cb(null, file.originalname)
        }
    });

    var upload = multer({ //multer settings
        storage: storage
    }).single('file');

    upload(req, res, function (err) {
        if (err) {
            res.json({error_code: 1, err_desc: err});
            return;
        }
        res.json({error_code: 0, err_desc: null});
    })

};

This setup is functioning correctly.

Question

Now, I am trying to figure out how to include additional data along with the file in the same POST request. For example, let's say I want to send a string like "additional info".

What I have attempted

In my service, I attempted to add the data like so:

...
var fd = new FormData();
fd.append('file', file);
fd.append('model', 'additional info');

$http.post(uploadUrl, fd, {...})

Although it appears to be sent successfully, I am unsure of how to access this extra data in the back-end. I looked through the req object but couldn't find it (no luck so far).

angularjs express multer

Answer 1

Answer №1

If you need to send both data (json format) and a file in one POST request, you can achieve this by adding them both to the form data object:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        var info = {
            "text":"additional info"
        };
        fd.append('data', angular.toJson(info));

        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })

        .success(function(){
        })

        .error(function(){
        });
    }
}]);

On the server side, this information will be stored in req.body.data, making it accessible like so:

upload(req, res, function (err) {
    if (err) {
        res.json({error_code: 1, err_desc: err});
        return;
    }

    console.log(req.body.data);

    res.json({error_code: 0, err_desc: null});
})

Answer 2

If you need to send both data (json format) and a file in one POST request, you can achieve this by adding them both to the form data object:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        var info = {
            "text":"additional info"
        };
        fd.append('data', angular.toJson(info));

        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })

        .success(function(){
        })

        .error(function(){
        });
    }
}]);

On the server side, this information will be stored in req.body.data, making it accessible like so:

upload(req, res, function (err) {
    if (err) {
        res.json({error_code: 1, err_desc: err});
        return;
    }

    console.log(req.body.data);

    res.json({error_code: 0, err_desc: null});
})

Answer 3

Answer №2

To retrieve the file, simply access it from req.files and then use fs.writeFile to save it.

fs.readFile(req.files.formInput.path, function (err, data) {
  fs.writeFile(newPath, data, function (err) {
    if (err) {
    throw err;
    }
    console.log("File has been successfully saved");
  });
});

Answer 4

To retrieve the file, simply access it from req.files and then use fs.writeFile to save it.

fs.readFile(req.files.formInput.path, function (err, data) {
  fs.writeFile(newPath, data, function (err) {
    if (err) {
    throw err;
    }
    console.log("File has been successfully saved");
  });
});

Answer 5

Answer №3

If you want to achieve a similar result, consider the following approach:

          $http({
                url: endpoint, 
                method: 'GET',
                data: json_payload,
                headers: {'Content-Type': 'application/json'}
          }).then(function(response) {
                var responseData = response.data;
                console.log(responseData);
          }, function onFailure(response) {
              // Handle errors in case of failure
          });

Another option is to include the data property inside your function.

    var userDetails = {
    username: $scope.user.username,
    password: $scope.user.password,
    fullName: $scope.user.fullName
    };

    $http.post(uploadEndpoint, formData, {
         transformRequest: angular.identity,
         data: userDetails,
         headers: {'Content-Type': 'application/json'}
    })

For backend processing, test something like this:

req.on('data', function (chunk) {
    console.log(chunk);
});

Answer 6

If you want to achieve a similar result, consider the following approach:

          $http({
                url: endpoint, 
                method: 'GET',
                data: json_payload,
                headers: {'Content-Type': 'application/json'}
          }).then(function(response) {
                var responseData = response.data;
                console.log(responseData);
          }, function onFailure(response) {
              // Handle errors in case of failure
          });

Another option is to include the data property inside your function.

    var userDetails = {
    username: $scope.user.username,
    password: $scope.user.password,
    fullName: $scope.user.fullName
    };

    $http.post(uploadEndpoint, formData, {
         transformRequest: angular.identity,
         data: userDetails,
         headers: {'Content-Type': 'application/json'}
    })

For backend processing, test something like this:

req.on('data', function (chunk) {
    console.log(chunk);
});

What is the best way to include data with a file when making an HTTP POST request with AngularJS and ExpressJS?

Situation

Question

What I have attempted

Answer №1

Answer №2

Answer №3

Similar questions

Encountered MissingSchemaError: The schema for this model has not been registered, mongoose.model was called before defining the schema

What is the process for implementing a new requirement for 'confirmed' users when they log in with passport.js?

Unable to access the router while attempting to connect through express

Error: The prop type validation has failed for `errors` in component `CreateProfile`. The expected type was `object`, but a `string` was

AngularJS error handling not receiving error response from Asp.Net API

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

Building a basic user authentication system in Node.js with Express, Passport, and MongoDB

Passing a message from a directive in AngularJS using event broadcasting

Firing ng-change with fileModel or input type="file"

Guide to capturing user input in an Express router after it has been initialized

Warning: Unhandled promise rejection - Error encountered while trying to add response due to inability to set headers after they have already been sent to the client

"The Jade templating engine in Express no longer retains relative directory paths within the href

bypassing files in mongodb for paging purposes

The React server-side rendering isn't reflecting changes made on the client-side route

Distinguishing between AngularJS ng-init and data-ng-initIn AngularJS,

Looking to connect information

How can I retrieve the user id of the current logged-in user in Odoo and Node.js?

How to switch images with a click using AngularJS

Foreign keys in a one-to-many relationship with Sequelize.js

Is Angular causing the issue with Datalist not functioning in IE9?