Apollo-upload-client with Cloudinary

Question

I am trying out uploading images using apollo-upload-client, graphql and cloudinary,

Goal: To successfully upload image to cloudinary, get the cloudinary url and insert into database

Present: Don't get any error message yet don't see file uploaded to cloudinary

Help: Is my code below correct? Anyone has successfully implemented solution with apollo-client-upload, graphql and cloudinary in their code? How to get the response url from cloudinary which I can insert into my db

So far, i have tested with uploading to our own local server and the code works fine. I have isolated and the error likely comes from below portion

Thanks in advance

export const cloudinaryUpload = async ({ stream }: any): Promise<string> => {
  console.log("stream upload gql ", stream);
  cloudinary.config({
    cloud_name: process.env.cloud_name,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
  });

  cloudinary.uploader
    .upload_stream({ resource_type: "raw" }, function(error: any, result: any) {
      console.log("error ", error);
      console.log("result ", result);
    })
    .end(stream.buffer);

  return `Test`;
};



export const processUpload = async (upload: any) => {

  const { stream } = await upload;

  const { id } = await storeUpload({ stream });
  return `id`;

Answer 1

I was having the same types of issues figuring out how to get the file up to cloudinary and came across this question here and at Cloudinary's support forums.

If anyone else is experiencing difficulty here's the solution: https://support.cloudinary.com/hc/en-us/community/posts/360031762832-graphql-upload-with-cloudinary

Answer 2

This works for me:

const cloudinary = require('cloudinary').v2;
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUDNAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRECT,
});

const imageUpload = async (imageFile) => {
  try {
    const { createReadStream } = await imageFile;
    const stream = createReadStream();
    const cloudinaryResponse = await cloudinary.uploader.upload(stream.path, { folder: 
'my-folder' });
    return cloudinaryResponse.eager[0].secure_url;
  } catch (error) {
    throw new Error('There was a problem uploading your image. Please try again.');
  }
};