-1

Browser Javascript:

const uploadFile = (file) => {
  // add the file to the FormData object
  const fd = new FormData();
  fd.append("avatar", file);

  // send `POST` request
  fetch("http://localhost:3001/uploadtoazure", {
    method: "POST",
    body: fd,
  })
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch((err) => console.error(err));
};

// select file input
const input = document.getElementById("upload");

// add event listener
input.addEventListener("change", () => {
  uploadFile(input.files[0]);
});

Server Router Handler:

async function uploadToAzure(req, res, next) {

  try {
    console.log(req.files);
    if (!req.files) {
      res.send({
        status: false,
        message: 'No file uploaded'
      })
    } else {
      // Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
      let avatar = req.files.avatar

      // Use the mv() method to place the file in the upload directory (i.e. "uploads")
      avatar.mv('./uploads/' + avatar.name)

      //send response
      res.send({
        status: true,
        message: 'File is uploaded',
        data: {
          name: avatar.name,
          mimetype: avatar.mimetype,
          size: avatar.size
        }
      })
    }
  } catch (err) {
    res.status(500).send(err)
  }
}

I get *undefined * when I try to log the content of the req.files

I am a few hours on this already. Pls help me

Tried a lot of changes and google for solutions but cannot figure out what is wrong at this point.

Need help

Fabian Cerqueira
  • 1
  • 1
  • 1
    You haven't included important information like what server framework you're using and what middleware that is supposed to populate `req.files` – Dominic Apr 26 '23 at 20:22
  • Isnt req.files coming from the incoming form? Using node.js with express only ... nothing else so far ... Trying to understand if my problem is on the client or the server side ... ? – Fabian Cerqueira Apr 26 '23 at 20:31
  • AFAIK req.files would be undefined unless you used some middleware like https://www.npmjs.com/package/express-fileupload – Dominic Apr 26 '23 at 20:33
  • Is there any other way to the the file in the server without using 3rd party package? – Fabian Cerqueira Apr 26 '23 at 20:34
  • Do I need the express-fileupload for the purpose of processing the image on the server? – Fabian Cerqueira Apr 26 '23 at 20:35
  • Possible dupe of: https://stackoverflow.com/questions/23114374/file-uploading-with-express-4-0-req-files-undefined File upload is a bit tricky and I'd recommend you use that middleware – Dominic Apr 26 '23 at 21:00
  • You **could** handle files on your own. I wouldn't, unless there's a really good reason. There's rarely a good reason. – Dave Newton Apr 27 '23 at 11:52
  • Thanks guys! I managed to make it work with the express-fileupload middleware! – Fabian Cerqueira Apr 27 '23 at 12:24
  • I am now having some trouble with uploading the file to Azure BLOB... will open another question for that ... Tks for the help!! – Fabian Cerqueira Apr 27 '23 at 12:25

1 Answers1

0

Solved by using the express-fileupload middleware. Tks for the help.

Fabian Cerqueira
  • 1
  • 1