Error: The formdata contains an unexpected field (Please upload an image)

Question

Error: The formdata contains an unexpected field (Please upload an image)

I have been encountering the same error on the server side no matter what I do while trying to upload an image file. If anyone can point out what I might be missing, I would greatly appreciate it.

javascript:

        const filePicker = document.getElementById('takePhoto');
        const myFile = filePicker.files[0];
        var formData = new FormData;
        formData.append('myFile', myFile) 
        
        fetch(appURL+'onlineHelp/questionImage', {
            method: 'POST',
            body: formData
        })

Data sent via FormData:

myFile: (binary)

On the server side:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'upload/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
 
var upload = multer({storage: storage});

onlineHelp.post('/questionImage', upload.single("myFile"), (req, res, next)=>{
    res.send("received")
    next(
})

Error message:

MulterError: Unexpected field
    at wrappedFileFilter (C:\Users\annet\Documents\ALS homeworx API\node_modules\multer\index.js:40:19)
    at Busboy.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\multer\lib\make-middleware.js:114:7)
    at Busboy.emit (events.js:198:13)
    at Busboy.emit (C:\Users\annet\Documents\ALS homeworx API\node_modules\busboy\lib\main.js:38:33)
    at PartStream.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\busboy\lib\types\multipart.js:213:13)
    at PartStream.emit (events.js:198:13)
    at HeaderParser.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (events.js:198:13)
    at HeaderParser._finish (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\HeaderParser.js:68:8)
    at SBMH.<anonymous> (C:\Users\annet\Documents\ALS homeworx API\node_modules\dicer\lib\HeaderParser.js:40:12)

javascript express fetch multipartform-data multer

Answer 1

Answer №1

If you're looking to upload images or files to a Node.js server, this code snippet might come in handy.

Here's the JavaScript:

    const formData = new FormData()
    formData.photo = file

    var res = await fetch('/your api', {
        method: 'PATCH',
        body: formData,
    })

On the server side, you'll need something like this:

   router.patch('/avatar', auth, async (req, res, next) => {
     if (req.files) {
      let photo = req.files.photo;
      if (photo.size < 3000000) {
         var random = Math.floor(Math.random() * 9999999 + 10);
         if (!photo.mv('./public/uploads/users/avatars/' + random + "_avatar." + photo.name.split('.').pop())) {
                return res.status(400).json({ "status": "error", "data": "server cann't upload" });
            }
            Users.findByIdAndUpdate(req.userId, { $set: { avatar: + random + "_avatar." + photo.name.split('.').pop(), update_in: Date.now() } }, function (err, user) {
                if (err) {
                    return res.status(400).json({ "status": "error", "msg": err });
                }
                Users.findById(req.userId).select("-password -role -sms -sms_time -__v").exec(function (err, user) {
                    return res.status(200).json({ "status": "success", "data": user }); //user update shod
                });
            });
        } else {
            return res.status(400).json({ "status": "error", "msg": "Photo size should be maximum 3MB" });
        }
    } else {
        return res.status(400).json({ "status": "error", "msg": "Image not found" });
    }
   });

To enable file uploads on your server.js app, include this code snippet:

    const fileUpload = require('express-fileupload');

    app.use(fileUpload({
      createParentPath: true
    }));

Answer 2

If you're looking to upload images or files to a Node.js server, this code snippet might come in handy.

Here's the JavaScript:

    const formData = new FormData()
    formData.photo = file

    var res = await fetch('/your api', {
        method: 'PATCH',
        body: formData,
    })

On the server side, you'll need something like this:

   router.patch('/avatar', auth, async (req, res, next) => {
     if (req.files) {
      let photo = req.files.photo;
      if (photo.size < 3000000) {
         var random = Math.floor(Math.random() * 9999999 + 10);
         if (!photo.mv('./public/uploads/users/avatars/' + random + "_avatar." + photo.name.split('.').pop())) {
                return res.status(400).json({ "status": "error", "data": "server cann't upload" });
            }
            Users.findByIdAndUpdate(req.userId, { $set: { avatar: + random + "_avatar." + photo.name.split('.').pop(), update_in: Date.now() } }, function (err, user) {
                if (err) {
                    return res.status(400).json({ "status": "error", "msg": err });
                }
                Users.findById(req.userId).select("-password -role -sms -sms_time -__v").exec(function (err, user) {
                    return res.status(200).json({ "status": "success", "data": user }); //user update shod
                });
            });
        } else {
            return res.status(400).json({ "status": "error", "msg": "Photo size should be maximum 3MB" });
        }
    } else {
        return res.status(400).json({ "status": "error", "msg": "Image not found" });
    }
   });

To enable file uploads on your server.js app, include this code snippet:

    const fileUpload = require('express-fileupload');

    app.use(fileUpload({
      createParentPath: true
    }));

Answer 3

Answer №2

To properly handle the directory, it is recommended to present it in an object like

cb(null, { fieldName: "temp_upload" });

It's important to note that for a production application where files need to be accessed on the website, using an object store such as s3 or another provider is advisable. This is because Node is often run as a cluster, with each instance having its own thread pool and not communicating with others. Therefore, if a user uploads a file on one instance, other instances will not have knowledge of the file.

Multer has an s3 plugin that is quite easy to use. However, if you are only uploading and reading files within the same process in the node stack (e.g. uploading an XML file and then reading it in the same process), you should be fine without needing an object store.

Answer 4

To properly handle the directory, it is recommended to present it in an object like

cb(null, { fieldName: "temp_upload" });

It's important to note that for a production application where files need to be accessed on the website, using an object store such as s3 or another provider is advisable. This is because Node is often run as a cluster, with each instance having its own thread pool and not communicating with others. Therefore, if a user uploads a file on one instance, other instances will not have knowledge of the file.

Multer has an s3 plugin that is quite easy to use. However, if you are only uploading and reading files within the same process in the node stack (e.g. uploading an XML file and then reading it in the same process), you should be fine without needing an object store.

Error: The formdata contains an unexpected field (Please upload an image)

Answer №1

Answer №2

Similar questions

Incorporate an image into the React state in order to showcase it within a personalized

Shorten certain text in Vuetify

Why is my Node.js express application throwing a 404 POST error?

Steps for resetting all Bootstrap JS controls:

Does this Loop run synchronously?

Angular throws an error when attempting to access a property that is undefined

Here is a step-by-step guide on how to use JQuery to swap out text with

The Postman continues to send the request indefinitely, never stopping

Warning for pending changes prior to moving in Svelte

Validating group radio buttons that have been checked

Collapse the Bootstrap Menu upon selecting a Link

Ways to customize date format based on locale in AngularJS

Vue displaying element tags without proper color rendering

when executing the Express program, an error page is displayed

Updating React state manually before using the setState function

Acquire 2394 through the use of typescript

Modify the AJAX data in Datatables without directly modifying the elements

The integration of angular 1.3.15 with html5mode for deeplinking, routing, and hash functionality

Load Bootstrap CSS file externally on a website dynamically

Methods for retrieving and persisting the data from a particular row within a table using JavaScript or jQuery