Skip to content

ImagePicker edited, Cloudinary Storage integrated, ShareToInstagram request...

maka9938 requested to merge content-publishing-image-picker into main

Please first merge the Content publishing MR, as this builds upon it.

In this update, I integrated Cloudinary for image storage to resolve an issue with the Instagram Content Publishing API. When using ImagePicker, we worked with ImageData, which includes a uri, name, and type. However, Instagram's API does not accept direct file uploads — it strictly requires a public URL of an image. Since we didn't have a way to provide a URL for locally captured or selected images, we needed a solution to store and retrieve the image as a URL before sending it to Instagram.

To solve this, I implemented an upload process where the image selected by the user (whether taken with the camera or picked from the gallery) is first uploaded to Cloudinary via our backend. Once the upload is successful, we retrieve the public URL of the stored image. This URL is then used when making the request to Instagram’s Content Publishing API.

In terms of implementation, I made the following changes:

  • Added an upload function (uploadImage) that sends the image file to our backend (/api/upload), which handles the actual upload to Cloudinary. The backend then returns the URL of the stored image along with an ID.
  • When a user selects or captures an image, it is first uploaded to Cloudinary.
  • Once the upload is complete, we extract the URL and pass it as a parameter to the shareToInstagramApi function.
  • This function then sends a request to our backend, which forwards the request to Instagram with the correct parameters.
  • Integrated these changes into the UI: The image selection process is handled in a modal, which now includes: an ImagePicker for selecting or taking a photo and text input field where the user can enter a caption before posting

Merge request reports