I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!