I’m using the newer version of apollo server V4, I need assistance on how to upload images or videos from Frontend to cloudinary and save the url to MongoDB database… please help
I have read through Apollo docs but there are no answers there… I’m kind of stuck now
There's a great blog post by Apollo on Apollo file uploads here, essentially they recommend using a 3rd party image service or pre-signed upload urls (e.g. fetch a pre-signed url via graphql, upload the image directly to that url, then save the location / id of the image through a graphql mutation).
There is a standard for uploading images through a graphql request, although Apollo don't recommend it, but the most popular Node.js package to help with this is graphql-upload.
To get this working with Apollo 4 and Express (if this is what you're using), you'll need to follow their instructions for using express middleware here.
Note that Apollo will block "simple" CORS requests to prevent CSRF attacks, which is likely to affect your image upload, so you need to follow the instructions here to include additional headers in your request or disable CSRF protection (not recommended). You can see an example of this by excluding the Apollo-Require-Preflight header from the CURL request below.
Here's a minimal example of graphql upload in codesandbox.
And a CURL request to test it
$ curl https://2nnbw4-4000.csb.app/ \
-F operations='{ "query": "mutation ($id: String!, $image: Upload!) { uploadImage(id: $id, image: $image) { id filename } }", "variables": { "image": null, "id": "1" } }' \
-F map='{ "0": ["variables.image"] }' \
-F 0=@tmp.jpg \
-H 'Apollo-Require-Preflight: true'
{"data":{"uploadImage":{"id":"1","filename":"tmp.jpg"}}}
In the response section of the Upload request to Cloudinary, you will receive the URL in the key: url.
Sample response: https://cloudinary.com/documentation/image_upload_api_reference#upload_response
You would be able to save this to your database through GraphQL. I'm not sure where you're stuck ( is the Apollo server connected to the DB? ) but I would advise looking up some guides on how to store data utilizing Apollo/GraphQL.
https://www.apollographql.com/tutorials/fullstack-quickstart/connecting-to-data-sources https://hasura.io/learn/graphql/intro-graphql/graphql-mutations/
