Plant form validation

[wesonweb]

Form to add plants to the database

• merges previous PR which created components and moves sections of the form there

Image storage

Front end

• useState hook manages the file upload and enables an image preview on front end
• converts the image file to base64
• the submitPlantData function sends the image and the rest of the plant object to the backend endpoint /api/plants/new-plant

Back end

• installs Cloudinary and creates config file with secrets from the .env file
• updates the Model schema - image now becomes an object to save both id and url returned by Cloudinary
• updates the createPlant controller in server/controllers/plantController so that once the endpoint receives the plant object it gets sent to Cloudinary and then returns the plant imageid and url
• creates the new plant and sends the json response to the front end

Screenshots

Completed the form using a test plant and an image of a spider plant. The image was sent and stored in Cloudinary:

Console log of the res.json(newPlant) received in the front end

tested on Postman to GET all plants from MongoDB - screenshot shows the spider plant

MongoDB screenshot confirming plant is there

[wesonweb]

Next I need to look at the 'plant problems' section of the form as it needs to be dynamic ie there may be no problems so it can be ignored or several problems can be added dynamically. The schema has it as an array of strings. Also need to check for accessibility and see if there are any refactors I can make on the code.

[wesonweb]

• replaces the HTML text field with TinyMCE wysiwyg and manages it wit a React Hook Form Controller wrapper
• adds image validation - will prevent sending to backend if image string url is empty and displays error to user