CODEWITHSUNDEEP
amazon-s3mernmulter-s3
jlimsy
jlimsy

Reputation: 13

Upload image files to AWS-S3: TypeError: Cannot read properties of undefined (reading 'transfer-encoding')

I am trying to upload images to AWS-S3 with MERN Stack, but I can't even get the backend to work. I am diligently following this tutorial but I am getting a TypeError: Cannot read properties of undefined (reading 'transfer-encoding').

I added encType='multipart/form-data' to my form in react as suggested by some sites, but it did not work.

I also did the relevant logs with debug here and formData.entries() produced the names of my files accurately:

const onImageChange = (event) => {
    const selectedFiles = event.target.files;
    setFiles(selectedFiles);
    log("event.target.files %o", event.target.files);
    log("selectedFiles %o", selectedFiles);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (files.length === 0) {
      return alert("please select an image");
    }

    const formData = new FormData();
    log("formData %o", formData);

    for (const file of files) {
      formData.append("s3Images", file);
    }

    log("formData after append %o", formData);

    for (const entry of formData.entries()) {
      const [key, value] = entry;
      console.log(`${key}:`, value);
    }

    const result = await fetch(BASE_URL + "/upload", {
      method: "POST",
      body: formData,
    });
    log("result %o", result);

    const data = await result.json();
    log("data %o", data);

Is there anything wrong with my multer?

const uploadWithMulter = () =>
  multer({
    storage: multerS3({
      s3: s3,
      bucket: BUCKET_NAME,
      metadata: function (req, file, cb) {
        cb(null, { fieldname: file.fieldname });
      },
      key: function (req, file, cb) {
        cb(null, file.originalname);
      },
    }),
  }).array("s3Images", 2);

const uploadToAws = (req, res) => {
  const upload = uploadWithMulter();

  upload((req, res, error) => {
    if (error) {
      res.json({ error, msg: "Error occurred while uploading images." });
      return;
    }
    res.json({ msg: "Files uploaded successfully.", files: req.files });
  });
};

router.post("/upload", uploadToAws);

Upvotes: 0

Views: 486

Answers (2)

jlimsy
jlimsy

Reputation: 13

The placement of my bracket caused the issue. It should been upload(req, res, (error) => {if (error) {...}} instead of upload((req, res, error) => {if (error) {...}} that I had originally.

This works:

const uploadToAws = (req, res) => {
  const upload = uploadWithMulter();
  // log("req %o", req);
  upload(req, res, (error) => {
    if (error) {
      res.json({ error, msg: "Error occurred while uploading images." });
      return;
    }
    res.json({ msg: "Files uploaded successfully.", files: req.files });
  });
};

Upvotes: 0

yasith
yasith

Reputation: 55

I think the error is way you're handling the upload middleware with Multer. In your uploadWithMulter function, you are calling multer() each time it is called. Try this

const uploadWithMulter = multer({
  storage: multerS3({
    s3: s3,
    bucket: BUCKET_NAME,
    metadata: function (req, file, cb) {
      cb(null, { fieldname: file.fieldname });
    },
    key: function (req, file, cb) {
      cb(null, file.originalname);
    },
  }),
}).array("s3Images", 2);

noww you create the multer middleware only once and then using it in the uploadToAws function. The uploadWithMulter function now returns the configured multer middleware.

(make sure you have the required dependencies)

Upvotes: 0

Related Questions