How to get image url from the formdata in server action.

Unanswered

Tan posted this in #help-forum

TanOP

2023-09-21T07:00:53.000Z

I am trying upload image in cloudinary via server actions.
Here is my snippet

export const uploadToCloudinary = (formData: FormData) => {
  console.log(formData.get("image"));
/* 
Getting this output:
File {
  size: 1506744,
  type: 'image/jpeg',
  name: 'nature.jpg',
  lastModified: 1695279357083
}
*/
};

Now I want to grab the url of this image. I am not sure how can I be able to do this. Any helpful guidence please.

6 Replies

@Tan I am trying upload image in cloudinary via server actions. Here is my snippet js export const uploadToCloudinary = (formData: FormData) => { console.log(formData.get("image")); /* Getting this output: File { size: 1506744, type: 'image/jpeg', name: 'nature.jpg', lastModified: 1695279357083 } */ }; Now I want to grab the url of this image. I am not sure how can I be able to do this. Any helpful guidence please.

@ts-ignore

2023-09-21T07:01:52.000Z

you upload this to cloudinary and then they give you the url

@@ts-ignore you upload this to cloudinary and then they give you the url

TanOP

2023-09-21T07:03:45.000Z

export const uploadToCloudinary = (formData: FormData) => {
  const image = formData.get("image");
  cloudinary.uploader
    .upload(image)
    .then((res) => console.log(res))
    .catch((err) => console.log(err));
};

Like this ?

@Tan js export const uploadToCloudinary = (formData: FormData) => { const image = formData.get("image"); cloudinary.uploader .upload(image) .then((res) => console.log(res)) .catch((err) => console.log(err)); }; Like this ?

@ts-ignore

2023-09-21T07:04:21.000Z

https://tryitands.ee

@@ts-ignore https://tryitands.ee

TanOP

2023-09-21T07:05:16.000Z

I'll try but typescript is yelling at me. saying :

   No overload matches this call.  Overload 1 of 2, '(file: string, options?: UploadApiOptions | undefined, callback?: UploadResponseCallback | undefined): Promise<UploadApiResponse>', gave the following error.    Argument of type 'FormDataEntryValue | null' is not assignable to parameter of type 'string'.      Type 'null' is not assignable to type 'string'.  Overload 2 of 2, '(file: string, callback?: UploadResponseCallback | undefined): Promise<UploadApiResponse>', gave the following error.    Argument of type 'FormDataEntryValue | null' is not assignable to parameter of type 'string'.      Type 'null' is not assignable to type 'string'. 13:13:4 typescript2769

@Tan I'll try but typescript is yelling at me. saying : No overload matches this call. Overload 1 of 2, '(file: string, options?: UploadApiOptions | undefined, callback?: UploadResponseCallback | undefined): Promise<UploadApiResponse>', gave the following error. Argument of type 'FormDataEntryValue | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(file: string, callback?: UploadResponseCallback | undefined): Promise<UploadApiResponse>', gave the following error. Argument of type 'FormDataEntryValue | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. 13:13:4 typescript2769

@ts-ignore

2023-09-21T07:08:28.000Z

I've never worked with cloudinary but some google lead me to [this](https://codesandbox.io/s/upload-to-cloudinary-with-javascript-forked-ktvnsd?from-embed=&file=/src/index.js) this has an example of how to upload using formdata. They're using XMLHttpRequest, you can change that to fetch api

TanOP

2023-09-21T07:13:33.000Z

Yeah fetch is there but I wanted to use the prebuilt sdk. I had used it with react where I could get url by URL.createObjectUrl(image) . Here it is also asking for the same. And I couldn't figure out how to grab the url form the file. May be due to difference in client and server component