Use AJAX to send data parameters and files to a backend server running on Node.js

Question

Use AJAX to send data parameters and files to a backend server running on Node.js

I've encountered an issue with my code and I'm struggling to pinpoint the exact problem.

In this particular section involving AJAX, I am trying to send a file from a form along with an argument to my node.js server:

var layerID = 2;
var formData = new FormData($("#formid")[0]);
formData.append('layer', layerID);
  $.ajax({
     url: "http://localhost:3000/file-upload",
     type: 'POST',
     data: formData,
     cache: false,
     contentType: false,
     processData: false
  });

Additionally, there is this part using Express which is supposed to accept the file and the argument:

app.use(bodyParser.urlencoded({
   extended: false
}))

app.post('/file-upload', function (req, res) {
  console.log('params: ' + req.params);
    console.log('body: ' + req.body);
    console.log('query: ' + req.query);
  upload(req, res, function (err) {
    if (err) {
      errorHandler
      return
    } else {
      successHandler
    }
  })
})

The issue lies in the fact that while the file is being received correctly, the 'layer' argument is not being received by my node.js server.

javascript ajax express post

Answer 1

Answer №1

When POSTing multipart data, make sure you have the appropriate body parser set up.

Refer to the documentation for the body parser:

The current body parser is not equipped to handle multipart bodies, as they are complex and often large. Consider using one of the following modules instead:

busboy and connect-busboy

multiparty and connect-multiparty

formidable

multer

Answer 2

When POSTing multipart data, make sure you have the appropriate body parser set up.

Refer to the documentation for the body parser:

The current body parser is not equipped to handle multipart bodies, as they are complex and often large. Consider using one of the following modules instead:

busboy and connect-busboy

multiparty and connect-multiparty

formidable

multer

Answer 3

Answer №2

To efficiently parse multipart data, you can utilize packages such as multiparty. There are various other packages available for this task.

Server-Side Code

const multiparty = require('multiparty');

         // Define POST route
 app.post('/file-upload', function (req, res) {
     const form = new multiparty.Form();

     form.parse(request, async (error, fields, files) => {
       if (error) throw new Error(error);

       try {
         const path = files.file[0].path;
         const layer = fields && fields.layer && fields.layer[0]
         const buffer = fs.readFileSync(path);

         // TODO 

         return response.status(200).send(data);
       } catch (error) {
         return response.status(400).send(error);
       }
     });
 }

You can retrieve information from fields in this manner.

Client-Side Code

const formData = new FormData();
formData.append('file', fileObj);

uploadHandler(formData) // this function will initiate an API call

With this setup, you can easily access files.file[0]

Answer 4

To efficiently parse multipart data, you can utilize packages such as multiparty. There are various other packages available for this task.

Server-Side Code

const multiparty = require('multiparty');

         // Define POST route
 app.post('/file-upload', function (req, res) {
     const form = new multiparty.Form();

     form.parse(request, async (error, fields, files) => {
       if (error) throw new Error(error);

       try {
         const path = files.file[0].path;
         const layer = fields && fields.layer && fields.layer[0]
         const buffer = fs.readFileSync(path);

         // TODO 

         return response.status(200).send(data);
       } catch (error) {
         return response.status(400).send(error);
       }
     });
 }

You can retrieve information from fields in this manner.

Client-Side Code

const formData = new FormData();
formData.append('file', fileObj);

uploadHandler(formData) // this function will initiate an API call

With this setup, you can easily access files.file[0]

Answer 5

Answer №3

The resolution emerged when I decided to relocate my request body log within the upload function, accessing it as shown here: console.log("layer: " + req.body['layer']);

Answer 6

The resolution emerged when I decided to relocate my request body log within the upload function, accessing it as shown here: console.log("layer: " + req.body['layer']);

Use AJAX to send data parameters and files to a backend server running on Node.js

Answer №1

Answer №2

Server-Side Code

Client-Side Code

Answer №3

Similar questions

Immediately Invoked Function Expression in Javascript

Tips on launching a new tab in a web browser from a ctools modal form within Drupal 7

Using a conditional statement in conjunction with the jQuery .animate function

JavaScript Indexed Array Names: Managing Arrays with Indices

Warning in Google Script editor

Loading Objects with Material Textures Ahead in Three.js

Manipulating CSS for a certain ID that is applied to multiple elements with the help of JQuery

Execute an AJAX request and dynamically update the page when the button is clicked simultaneously

What is the essential Angular 2 script that must be included for a simple Angular 2 application to function properly?

Webster Barron code script

Exploring the power of Node.js and underscore.js for advanced templating capabilities

Handling the success of a $.ajax function when encountering an unconventional HTTP status code

The save and cancel button are experiencing technical difficulties and are currently non-functional

Contrast two JSON data sets

Managing numerous Ajax requests during pagination

Could you explain why my code is not functioning as intended when I attempt to modify the class of a specific element?

Tips for correctly mapping a shuffled array in React/Next without triggering a hydration mismatch error

What is the best way to fill the MongoDB post schema with every comment for the post?

The error message "TypeError: 'undefined' is not an object ('_this.props')" indicates that the property '_this

What is the functionality of the cookie-session middleware in Express.js?