Upload from non-Express Node.js server

JaredUtah
JaredUtah Member Posts: 1 ✭
edited October 2023 in Developer APIs

I have tried a bunch of different ways to upload images, successfully using the upload widget using signed and unsigned versions. I'm also able to upload an image not using the upload widget using a generated signature returned from our server.

One thing I would like to figure out is a solution where I send an image to our Node.js server (not express so I can't use multer) and then upload to Cloudinary from the server, but it is not working. One problem is just understanding the vocabulary and process, I haven't had a lot of experience with images, buffers, etc. With the direct upload from our React frontend to Cloudinary, which works, I do something like this:

let data = //signature result from backend
let formData = new FormData();
let fileName = `test.png`;

let file = new File([blob], fileName);  //blob coming from canvas object

formData.append('file', file, fileName);
formData.append('api_key', data.api_key);
formData.append('upload_preset', data.upload_preset);
formData.append('signature', data.signature);
formData.append('timestamp', data.timestamp);

axios
   .post('https://api.cloudinary.com/v1_1/....../image/upload', formData)
   .then((res) => {
     console.log(res);
   })
   .catch((err) => {
     console.log(err);
   });

I send the image the same way to our Node server, but I'm not sure what to do with it to then upload it to Cloudinary. Can you point me in the right direction? Again, not using Express so no access to middleware solutions. Tried this, but it is not working:

const buffer = Buffer.from(req.body, 'base64');

v2.config({ cloud_name: ..., api_key: ..., etc})

const promise = await new Promise((resolve, reject) => {
  const stream = v2.uploader.upload_stream((error, result) => {
    if (result) {
      resolve(result);
    } else {
      reject(error);
    }
  });

  const str = Readable.from(buffer);

  str.pipe(stream);
});

If I put the req.body in a base64 decode tool, it looks like this:

------WebKitFormBoundaryc1AgTm8WgA2eAI1z
Content-Disposition: form-data; name="body"

[object FormData]
------WebKitFormBoundaryc1AgTm8WgA2eAI1z--
Tagged:

Answers

Categories