To achieve the ability to screen images before we display them to the users on our application, we are going to do the following:
- On the view-thread page, we are going to provide a button next to Reply named Reply with Image to keep things simple
- The user is going to upload an image to our server using this interface
- The image will be saved on our servers temporarily
- The uploaded images will then be sent to the Google Cloud Vision API to detect labels and safe search annotations
- If the safe search annotations return POSSIBLE for the adult, medical, or violence categories, we do not allow the user to upload the image
- If the image is safe, we then upload it to Cloudinary, an image hosting service
- Once the upload to Cloudinary is successful, we will get the public URL
- Using all the data we have gathered so far, we are going to create a new message and then respond to it
- The Angular app will process the response and update the thread
Uploading images to Cloudinary is optional. I have implemented it to show an end-to-end flow.
Before we start the implementation, we need to create an API key for Cloudinary.