CODEWITHSUNDEEP
expressfile-uploaderror-handlingpostmancloudinary
Zakaria Bougroug
Zakaria Bougroug

Reputation: 51

Cloudinary\Error: Missing required parameter - file - Express and Postman

first time trying to upload images to Cloudinary and I have come across an issue when using Express via Postman.

Using form-data on setting 'file' to upload an image to Cloudinary

As of now, when I try to access the req.body I get an empty object, so I guess that has to do with why cloudinary.uploader.upload cannot read the file passed as its first param, since its req.body.file, as shown in the code below.

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_KEY,
    api_secret:  process.env.CLOUDINARY_SECRET
})



exports.upload = async (req, res) => {

  try{
   
console.log(req.body);
const result =  await cloudinary.uploader.upload(req.body.file, {
    public_id: `${Date.now()}`, 
    resource_type: "auto"
})

return res.json({
    public_id: result.public_id,
    url: result.secure_url
})

}catch(err){
  console.log(err)
}

}

The error message I get:

{
  message: 'Missing required parameter - file',
  name: 'Error',
  http_code: 400
}

Any suggestions to solve this issue?

Upvotes: 3

Views: 9738

Answers (3)

Siddharth
Siddharth

Reputation: 91

Solved!

This is how i am setting the FormData

let myTestForm = new FormData();

myTestForm.set("name", name);
myTestForm.set("email", email);
myTestForm.set("Avatar", Avatar);
myTestForm.set("password", password);

This is how i am using the FormData

const config = {
  headers: {
    "Content-type": "multipart/form-data",
  },
};

const { data } = await axios.post(`/api/v1/register`, userData, { config });

please don't pass it this way { userData} , had struggled for with this :/

This is how i am uploading image

const myCloud = await cloudinary.v2.uploader.upload(req.body.Avatar, {
folder: "Avatars",
width: 150,
crop: "scale",
public_id: `${Date.now()}`,
resource_type: "auto",

});

PS : in my case i had to upload only 1 image. Have not passed any parameter in app.js file

app.use(bodyParser.urlencoded({ extended: true }));
app.use(fileUpload());

Upvotes: 0

Kenil Barvaliya
Kenil Barvaliya

Reputation: 119

const result = await cloudinary.uploader.upload(req.file, { public_id: ${Date.now()}, resource_type: "auto" })

and add file from form data and type should be File

enter image description here

Upvotes: 2

Zakaria Bougroug
Zakaria Bougroug

Reputation: 51

I solved it! I was not able to pass the form-data as req.body to the server, so I had to try and access it through req.files, but was not able to with that either, so I searched a bit and found a middleware 'express-fileupload', and that did the trick. I just added it in my app.js and used

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

app.use(fileupload({useTempFiles: true}))

So now I can access my req.files.

exports.upload = async (req, res) => {

  const file = req.files.image

  try{
console.log(file);

const result =  await cloudinary.uploader.upload(file.tempFilePath, {
    public_id: `${Date.now()}`, 
    resource_type: "auto"
})

res.json({
    public_id: result.public_id,
    url: result.secure_url
})

}catch(err){
  console.log("Error", err)
return res.status(400).json({error: err})
}

}

The response I get is:

{
  name: 'some-image.png',
  data: <Buffer >,
  size: 99770,
  encoding: '7bit',
  tempFilePath: ' **C:\\filepath\some-image.png** ',
  truncated: false,
  mimetype: 'image/png',
  md5: 'b5f612a571442bf604952fd12c47c1bf',
  mv: [Function: mv]
}
POST /cloudinary/upload-images 200 1617.944 ms - 119

And it is uploaded successfully to my Cloudinary.

Upvotes: 2

Related Questions